<select id="selProvince">
<option>--请选择--</option>
</select>
<select id="selCity">
<option>--请选择--</option>
</select>
<select id="selCountry">
<option>--请选择--</option>
</select>
今天写了这个三级下拉框，终于理清了思路，记录如下：
1、首先分析下整体思路，省是一个一维数组，里面有各个省，市呢就是一个二维数组，里面有各个省分别对应的市，区县呢就是一个三维数组，里面分别对应了省市下的区县，代码如下：
var dProvince = ["河北省", "山西省", "湖北省"]; var dCity = [["石家庄市", "张家口市", "承德市", "秦皇岛市"], ["太原市", "朔州市", "大同市", "阳泉市"], ["武汉市", "孝感市", "宜昌市", "襄阳市"]]; var dCountry = [[["无极县", "赵县", "栾城县"], ["沽源县", "尚义县", "阳原县"], ["平泉县", "滦平县", "隆化县"], ["抚宁县", "卢龙县", "昌黎县"]], [["清徐县", "阳曲县", "娄烦县"], ["山阴县", "应县", "右玉县"], ["左云县", "阳高县", "天镇县"], ["盂县", "平定县", "矿区"]], [["武昌区", "洪山区", "东湖新区"], ["云梦县", "大悟县", "应城市"], ["秭归县", "远安县", "枝江市"], ["枣阳市", "老河口市", "谷城县"]]]
2、接下来就是在省的框里出现省，方法呢就是用for循环循环出省的数据，并append进入。
for (var i = 0; i < dProvince.length; i++) {
$("#selProvince").append("<option>"+dProvince[i]+"</option>");
}
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<dc.length;i++){
$("#selCity").append("<option>"+dc[i]+"</option>");
}
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("<option>" + dc[i] + "</option>");//添加
}
}
}
});
总结，这里的点击事件用的是change()方法。找索引就是index();通过for循环遍历数组并添加。
