Jquery实现下拉菜单-原创手记-慕课网

<!DOCTYPE html>
<html>
   <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>test</title>
   <style>


   </style>
   <script src="js/jquery-1.10.2.min.js"></script>
   <script >

    $(document).ready(function(){
         function objInit(obj){
       return $(obj).html("<option>请选择</option>");
   }
         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"}

   };
   $.each(arrData,function(pF){
        $("#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>");
          });
         }
        });

       });
      }
     });
   });

   $("#button1").click(function(){
       var strValue="您选择的厂商:";
    strValue+=$("#selF option:selected").text();
    strValue+=" 您选择的品牌：";
    strValue+=$("#selT option:selected").text();
    strValue+=" 您选择的型号：";
    strValue+=$("#selC option:selected").text();
    $("#divTip").html(strValue);
   });

    });

   </script>
   </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="button1" type="button" value="查询" class="btn"/>
    </div>
    <div class="clsInit" id="divTip"></div>

</body>
</html>