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

前端之家收集整理的这篇文章主要介绍了js select下拉联动 更具级联性!前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

之前有过记录,select下拉联动 ()区别在这个级联性更强。

HTML源码:

<div class="container">
<table>
<tr>
<td>厂商:</td>
<td><select id="selF"></td>
<td>品牌:</td>
<td><select id="selT"></td>
<td>型号:</td>
<td><select id="selC"></td>
<td></td>
</tr>
</table>

JS(USjs.js)源码: 在转载的基础上做了修改,特别是源数据JSON格式。

function objInit(obj){
return $(obj).html('');
}

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

JSON(data.json)文件,

Find more from:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/42875.html

猜你在找的JavaScript相关文章