为了账号安全,请及时绑定邮箱和手机立即绑定

Jquery实现下拉菜单

标签:
JQuery

<!DOCTYPE html>
<html>
   <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>test</title>
   <style>
  
 
   </style>
   <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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+="&nbsp;您选择的品牌:";
    strValue+=$("#selT option:selected").text();
    strValue+="&nbsp;您选择的型号:";
    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>


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消