省市区三级联动下拉框效果分析

Posted 2020-10-23 彩色泡泡

    <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循环遍历数组并添加。