2.遍历市
2.1 根据省的索引来选择对应的市
2.2 清空上一回选择的市和县
2.3 如果省的索引大于 0 ,使其为 0 ,才能正常的遍历市,否则不能正常匹配
2.4 在市的一列后边追加遍历出来的市
3.遍历县
3.1 根据市的索引来选择对应的县
3.2 清空上一回选择的县
3.3 如果市的索引大于 0 ,使其为 0 ,才能正常的遍历县,否则不能正常匹配
3.4 在县的一列后边追加遍历出来的县
现有三个省的数组
var aProvince = ["河北省","山西省","湖北省"];var aCity = [ ???["石家庄市", "张家口市", "承德市", "秦皇岛市"], ???["太原市", "朔州市", "大同市", "阳泉市"], ???["武汉市", "孝感市", "宜昌市", "襄阳市"]];var aCounty = [ ???[ ???????["无极县", "赵县", "栾城县"], ???????["沽源县", "尚义县", "阳原县"], ???????["平泉县", "滦平县", "隆化县"], ????????["抚宁县", "卢龙县", "昌黎县"] ???], ???[ ???????["清徐县", "阳曲县", "娄烦县"], ????????["山阴县", "应县", "右玉县"], ????????["左云县", "阳高县", "天镇县"], ???????["盂县", "平定县", "矿区"] ???], ???[ ???????["武昌区", "洪山区", "东湖新区"], ????????["云梦县", "大悟县", "应城市"], ???????["秭归县", "远安县", "枝江市"], ???????["枣阳市", "老河口市", "谷城县"] ???]];
对应的html代码:
<select id="selProvince"> ???????????<option>--请选择--</option> ???????</select> ???????<select id="selCity"> ???????????<option>--请选择--</option> ???????</select> ???????<select id="selCounty"> ???????????<option>--请选择--</option> ???????</select>
第一步、遍历省(最简单)
先求出数组的长度,否则无法遍历。
再在select元素里追加子元素option,使用append
for(var i=0; i<aProvince.length; i++){ ???????$("#selProvince").append("<option>"+aProvince[i]+"</option>"); ???}
第二步、根据省遍历对应的省的市,如选择河北省,则不会出现湖北省的市,只会出现河北省的市,选择湖北同样只会出现湖北的市。
先清除上回出现过的,如果没有选择过,就清除0呗,不清除的话会在上回出现的基础上累加。
再获取省对应的索引值,如河北省应当是 1,但到我们定义的数组里是 0 ,我们让索引值 -1 ,即清除掉“--请选择--”的索引,让河北省的索引为 0 ,这样才可以遍历对应的市。
遍历方法同省
//根据省遍历市 ???$("#selProvince").change(function(){ ?//点击xx省的时候触发时事件 ???????$("#selCity").children("option").not(":eq(0)").remove(); //清空市 ???????$("#selCounty").children("option").not(":eq(0)").remove(); //清空县 ???????num1 = parseInt($(this).children("option:selected").index()); ?//获取省索引 ???????if(num1 > 0){ ???????????var ac = ?aCity[num1-1]; ?//让市的索引从 当前省的索引-1开始遍历 ???????????for(var j=0; j<aCity.length; j++){ ???????????????$("#selCity").append("<option>"+ac[j]+"</option>"); ???????????} ???????} ???});
第三步、同第二步
//根据市遍历县 ???$("#selCity").change(function(){ ???????$("#selCounty").children("option").not(":eq(0)").remove(); ?//只需清除县, ???????num2 = parseInt($(this).children("option:selected").index()); ?//获取市的索引 ???????if(num2 > 0) { ???????????var ac = aCounty[num1-1][num2-1]; ?//根据省找到市,在根据市找打县,再遍历 ???????????for(var j=0; j<aCounty.length; j++) { ???????????????$("#selCounty").append("<option>"+ac[j]+"</option>"); ???????????} ???????} ???});
源码下载地址:链接:https://pan.baidu.com/s/1lxo42UyIQmudwBM-C6jtWA 密码:eu04
如果连接失效,可以联系我:huamuxiong_2018#163.com ?(请自动将#转换成@)
jQuery实现 ??三级联动--省市县
原文地址:http://blog.51cto.com/13534640/2125509