今天写了这个三级下拉框,终于理清了思路,记录如下:
1、首先分析下整体思路,省是一个一维数组,里面有各个省,市呢就是一个二维数组,里面有各个省分别对应的市,区县呢就是一个三维数组,里面分别对应了省市下的区县,代码如下:
var dProvince = ["河北省", "山西省", "湖北省"];
var dCity = [["石家庄市", "张家口市", "承德市", "秦皇岛市"], ["太原市", "朔州市", "大同市", "阳泉市"], ["武汉市", "孝感市", "宜昌市", "襄阳市"]];
var dCountry = [[["无极县", "赵县", "栾城县"], ["沽源县", "尚义县", "阳原县"], ["平泉县", "滦平县", "隆化县"], ["抚宁县", "卢龙县", "昌黎县"]], [["清徐县", "阳曲县", "娄烦县"], ["山阴县", "应县", "右玉县"], ["左云县", "阳高县", "天镇县"], ["盂县", "平定县", "矿区"]], [["武昌区", "洪山区", "东湖新区"], ["云梦县", "大悟县", "应城市"], ["秭归县", "远安县", "枝江市"], ["枣阳市", "老河口市", "谷城县"]]]
2、接下来就是在省的框里出现省,方法呢就是用for循环循环出省的数据,并append进入。
for (var i = 0; i < dProvince.length; i++) {
$("#selProvince").append("");
}
3、这时候3个省已经出现在了省的下拉框里。当我们点击其中一个省,怎么出现对应的市呢?其实省和对应的市就是一 一对应的关系。
比如河北省,他在省里的index是0,我们只要找到他的索引就找到对应的他。市也如此,我们要找河北下的市,那他的下标不就是dCity[0];
这时候我们就来找市的index和把对应的市append到市的下拉框里。
$("#selProvince").change(function () {//点击市
$("#selCity").children().not("option:eq(0)").remove(); //每次添加市的时候,上次添加的市都清除掉,但是要留下“请选择”。
$("#selCountry").children().not("option:eq(0)").remove();//区县的也要清除掉上次的,但留下“请选择”
num1 = parseInt($(this).children("option:selected").index());//获取到市对应的索引
console.log(num1);//可以打印出来看看河北是1,但我们希望他的索引是0。
if (num1 > 0) {
var dc = dCity[num1 - 1]; //这里就把省的索引-1,得到河北省的索引为0;
console.log(dc);//那么河北对应市就是["石家庄市", "张家口市", "承德市", "秦皇岛市"]
然后再把对应的市通过for循环添加到市的下拉框里。
for(var i=0;i $("#selCity").append("");
}
4、区县的方法也是如此。
["无极县", "赵县", "栾城县"]对应的索引就是dcountry[0][0]
$("#selCity").change(function () {//选择市,这里是用change()方法
$("selCountry").children().not("option:eq(0)").remove();//去掉上次添加的。
num2 = $(this).children("option:selected").index();//市对应的索引。
console.log(num2);
if (num2 > 0) {
var dc = dCountry[num1 - 1][num2 - 1];//对应的区县
console.log(dc);
for (var i = 0; i < dc.length;i++){//通过for循环
for (var i = 0; i < dc.length; i++) {
$("#selCountry").append("");//添加
}
}
}
});
总结,这里的点击事件用的是change()方法。找索引就是index();通过for循环遍历数组并添加。