zoukankan      html  css  js  c++  java
  • jQuery下拉列表框联动展示数据

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style>
    .clsInit{
    435px;
    height:35px;
    line-height: 35px;
    padding-left: 10px
    }
    .clsTip{
    padding-top: 5px;
    background-color: #eee;
    display: none;
    }
    .btn{
    border:#666 1px solid;
    padding:2px;
    65px;
    float: right;
    margin-top: 6px;
    margin-right: 6px;
    }
    </style>
    </head>
    <body>
    <div class="clsInit">
    厂商:<select id="selF"><option>请选择</option></select>
    品牌:<select id="selT"><option>请选择</option></select>
    型号:<select id="selC"><option>请选择</option></select>
    <input id="Button" type="button" value="查询" class="btn">
    </div>
    <div class="clsInit" id="divTip"></div>
    <script type="text/javascript">
    $(function(){
    var arrData={
    产商1:{品牌1_1:"型号1-1-1,型号1-1-2",品牌1_2:"型号1-2-1,型号1-2-2"},
    产商2:{品牌2_1:"型号2-1-1,型号2-1-2",品牌2_2:"型号2-2-1,型号2-2-2"},
    产商3:{品牌3_1:"型号3-1-1,型号3-1-2",品牌3_2:"型号3-2-1,型号3-2-2"}
    };
    function objInit(obj){
    return $(obj).append("<option>请选择</option>");
    };
    $.each(arrData,function(pF,pS){
    $("#selF").append("<option>"+pF+"</option>");
    });
    $("#selF").change(function(){
    // objInit("#selT");
    // objInit("#selC");
    $.each(arrData,function(pF,pS){
    if($("#selF option:selected").text()==pF){
    $.each(pS,function(pT,pC){
    $("#selT").append("<option>"+pT+"</option>");
    })
    $("#selT").change(function(){
    // objInit("#selC");
    $.each(pS,function(pT,pC){
    if($("#selT option:selected").text()==pT){
    $.each(pC.split(','),function(){
    $("#selC").append("<option>"+this+"</option>");
    })
    }
    })
    })
    }
    })
    })
    $("#Button").click(function(){
    var strValue="您选择的厂商:";
    strValue+=$("#selF option:selected").text();
    strValue+="&nbsp;您选择的品牌是:";
    strValue+=$("#selT option:selected").text();
    strValue+="&nbsp;您选择的型号是:";
    strValue+=$("#selC option:selected").text();
    $("#divTip").show().addClass("clsTip").html(strValue);
    })
    })
    </script>
    </body>
    </html>
  • 相关阅读:
    年度最佳负能量的50句话
    drbd初探及Heartbeat+DRBD+MySQL
    slatsatck file模块2种写法及系统初始化
    补鞋匠---Cobbler 服务器自动搭建
    sudo日志记录记录(rsyslog)
    [svc]lnmp一键安装脚本(含有np与mysql分离)
    webBench&ad网站并发测试工具
    Amoeba软件实现mysql读写分离
    awstat分析nginx日志
    网站的PV UV IP---网站常见软件性能
  • 原文地址:https://www.cnblogs.com/family-spring/p/5428028.html
Copyright © 2011-2022 走看看