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

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

HTML源码：

 
 
  
  
 
 
 
 
 
 
 
 
 
 
  
厂商：
 
  
请选择
 
  
品牌：
 
  
请选择
 
  
型号：
 
  
请选择
 
  
 
 
 
 
 
 
 
 
 

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

$(function(){ 
 
 function objInit(obj){ 
 return $(obj).html('请选择'); 
 } 
 
 $.getJSON('data.json', function(json) { 
 var arrData = json; 
 $.each(arrData,function(pF,pV){ 
  $('#selF').append(''+pV.n+''); 
 }); 
 $('#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(''+pC.n+''); 
   }); 
   $('#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(''+vv.n+''); 
    }) 
    } 
   }) 
   }); 
  } 
  }) 
 }); 
 }); //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.jb51.net/article/102040.htm

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