当前位置：首页 > 资讯 > 技术文档

js select下拉联动更具级联性!

时间：2022-09-26 04:57 编辑：来源：阅读：
扫一扫，手机访问

摘要：js select下拉联动更具级联性!

之前有过记录，select下拉联动（[url=http://www.1sucai.cn/article/102016.htm]Bootstrap、JQuery插件之cxselect[/url]）区别在这个级联性更强。 [img]http://files.jb51.net/file_images/article/201701/201714152006698.jpg?201704152014[/img] HTML源码：

<!DOCTYPE html> 
<head> 
 <meta charset="utf-8"> 
 <title></title> 
</head> 
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 
<script type="text/javascript" src="USjs.js"></script> 
<body> 
 
<div class="container"> 
 <table> 
  <tr> 
   <td>厂商：</td> 
   <td><select id="selF"><option>请选择</option></select></td> 
   <td>品牌：</td> 
   <td><select id="selT"><option>请选择</option></select></td> 
   <td>型号：</td> 
   <td><select id="selC"><option>请选择</option></select></td> 
   <td><input type="button" value="查询" id="Button1" class="btn" /></td> 
  </tr> 
 </table> 
</div> 
 
</body> 
</html>

JS（USjs.js）源码：在转载的基础上做了修改，特别是源数据JSON格式。

$(function(){ 
 
 function objInit(obj){ 
  return $(obj).html('<option>请选择</option>'); 
 } 
 
 $.getJSON('data.json', function(json) { 
  var arrData = json; 
  $.each(arrData,function(pF,pV){ 
   $('#selF').append('<option value="'+pF+'">'+pV.n+'</option>'); 
  }); 
  $('#selF').change(function(){ 
   objInit('#selT'); 
   objInit('#selC'); 
   $.each(arrData,function(pF,pS){ 
    if($('#selF option:selected').attr('value')==pF){ 
     $.each(pS.s,function(pT,pC){ 
      $('#selT').append('<option value="'+pT+'">'+pC.n+'</option>'); 
     }); 
     $('#selT').change(function(){ 
      objInit('#selC'); 
      $.each(pS.s,function(pT,pC){ 
       if($('#selT option:selected').attr('value')==pT){ 
        $.each(pC.s,function(ii,vv){ 
         $('#selC').append('<option value="'+ii+'">'+vv.n+'</option>'); 
        }) 
       } 
      }) 
     }); 
    } 
   }) 
  }); 
 }); //getJSON 
});

JSON（data.json）文件,

[ 
 { 
  "n":"厂商1", 
  "s":[ 
    { 
   "n":"品牌一", 
   "s":[{"n":"型号1-1-1"},{"n":"型号1-1-2"}] 
    }, 
    { 
   "n":"品牌二", 
   "s":[{"n":"型号1-2-1"},{"n":"型号1-2-2"}] 
    } 
    ] 
 }, 
 { 
  "n":"厂商2", 
  "s":[ 
    { 
   "n":"品牌一", 
   "s":[{"n":"型号2-1-1"},{"n":"型号2-1-2"}] 
    }, 
    { 
   "n":"品牌二", 
   "s":[{"n":"型号2-2-1"},{"n":"型号2-2-2"}] 
    } 
    ] 
 }, 
 { 
  "n":"厂商3", 
  "s":[ 
    { 
   "n":"品牌一", 
   "s":[{"n":"型号3-1-1"},{"n":"型号3-1-2"}] 
    }, 
    { 
   "n":"品牌二", 
   "s":[{"n":"型号3-2-1"},{"n":"型号3-2-2"}] 
    } 
    ] 
 } 
]

Find more from: [url=http://www.1sucai.cn/article/102040.htm]http://www.1sucai.cn/article/102040.htm[/url] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：js点击列表文字对应该行显示背景颜色的实现代码
下一篇：网页右下角弹出窗体实现代码

资讯排行榜
更多>>

js select下拉联动 更具级联性!

js select下拉联动更具级联性!