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

Posted 彩色泡泡

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了省市区三级联动下拉框效果分析相关的知识,希望对你有一定的参考价值。

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

 

以上是关于省市区三级联动下拉框效果分析的主要内容,如果未能解决你的问题,请参考以下文章

vue+json自定义实现省市区三级联动下拉列表(独立select)

三级联动怎么回显 javaweb

vue仿京东省市区三级联动选择组件

layui省市区下拉菜单三级联动

Vue使用distpicker插件实现省市级下拉框三级联动

js中的省市区三级联动