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

2019-11-19 18:08:41

字体：大中小

来源：转载

供稿：网友

之前有过记录，select下拉联动（Bootstrap、JQuery插件之cxselect）区别在这个级联性更强。

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: //www.VeVB.COm/article/102040.htm

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JavaScript中String对象的方法介绍

下一篇：基于JavaScript实现熔岩灯效果导航菜单