省市区三级联动

省市区三级联动

html代码

<!-- 省 -->
<select id="province">
    <option selected>--请选择--</option>
</select>
<!-- 市 -->
<select id="city">
    <option selected>--请选择--</option>
</select>
<!-- 区/县去 -->
<select id="region">
    <option selected>--请选择--</option>
</select>

js代码

<script>
	//定义三个数	
	//一维数组表示 省
    var arr1 = ["湖南省", "江西省", "广东省", "北京"];
    //二维数组表示 市
    var arr2 = [
        ["长沙市", "湘潭市", "株洲市", "衡阳市"],
        ["南昌市", "赣州市", "九江市"],
        ["广州市", "深圳市", "佛山市"],
        ["北京"]
    ];
    //三维数组表示 区县
    var arr3 = [
        [
            ["岳麓区", "芙蓉区", "望城区"],
            ["雨湖区", "湘潭县", "韶山市"],
            ["天元区", "芦淞区", "炎陵县","攸县"],
            ["南岳区", "珠晖区", "祁东县"]
        ],
        [
            ["新建区", "东湖区", "西湖区"],
            ["赣县区", "章贡区"],
            ["修水县", "浔阳区", "武宁县"]
        ],
        [
            ["天河区", "白云区", "海珠区"],
            ["罗湖区", "龙岗区", "盐田区"],
            ["三水区", "顺德区", "高明区"]
        ],
        [
            ["丰台区", "海淀区", "朝阳区"]
        ]
    ];
    //（不难看出有的省对应的市或区县，长度也有所不同）
</script>

三维数组 中值的对应关系：

写法一

js写法：（当省发生改变，动态添加市；当市发生改变，动态添加区县）

<script>
	for (const x in arr1) { //for in 循环 x表示下标  arr1表示需要遍历的对象
        province.appendChild(document.createElement("option"));
        province.lastChild.innerHTML = arr1[x];
    }

    province.onchange = function() {
        city.options.length = 1; //初始化  即下拉框默认显示第一个选项->  --请选择-- 
        region.options.length = 1; //初始化  
        for (const x in arr1) {
            if (this.value == arr1[x]) {
                for (const y in arr2[x]) {
                    city.appendChild(document.createElement("option"));
                    city.lastChild.innerHTML = arr2[x][y];
                }
            }
        }
    }

    city.onchange = function() { //当城市下拉框发生改变时：
        region.options.length = 1; //初始化 清空县/区的值
        for (const x in arr1) { //for-in（可以获取下标） 遍历json1数组中的值(省)
            for (const y in arr2[x]) { //················ 遍历json2数组中对应 省 的值(市)
                if (this.value == arr2[x][y]) { //当选中的城市 等于 遍历的城市时 就等于拿到了城市所在的“下标”
                    for (const z in arr3[x][y]) { //·················  遍历json3数组中对应 省及市 的值(县/区)
                        region.appendChild(document.createElement("option")); //给region(县/区)下拉框添加option标签(元素) 个数等于遍历json3数组的次数
                        region.lastChild.innerHTML = arr3[x][y][z]; //每添加一个option标签 就给这个标签设置初始值 这个值是从前面获取的“下标”来确定的
                    }
                }
            }
        }
    }
</script>        

写法二

jQuery进阶写法：（当省发生改变，市默认选中第一个，区县也默认选中第一个）

<script>
	//遍历arr1中的值，并添加相应的 省
	$.each(arr1, function(i, v) {
        $("#province").append("<option value='" + v + "'>" + v + "</option>");
    });
	//当省的下拉框发生改变时 动态添加市中的值，并默认选中第一个
	//此时默认选中市 这个操作也算市的下拉框发生改变，所以同样需要 动态添加区县中的值,并默认选中第一个
    $("#province").change(function() {
        $("#city")[0].options.length = 1;
        $("#region")[0].options.length = 1;
        let province = $(this).val();
        $.each(arr1, function(i, v1) {
            if (v1 == province) {
                $.each(arr2[i], function(j, v2) {
                    if (j == 0) {//下标为0时添加一个selected属性 让其默认被选中
                        $("#city").append("<option value='" + arr2[i][j] + "' selected>" + arr2[i][j] + "</option>");
                    } else {
                        $("#city").append("<option value='" + arr2[i][j] + "'>" + arr2[i][j] + "</option>");
                    }
                });
            }
        });
        $("#city").change();//手动调用城市下拉框的onchange事件
    });

    $("#city").change(function() {
        $("#region")[0].options.length = 1;
        let city = $(this).val();
        $.each(arr1, function(i, v1) {
            $.each(arr2[i], function(j, v2) {
                if (v2 == city) {
                    $.each(arr3[i][j], function(k, v3) {
                        if (k == 0) {
                            $("#region").append("<option value='" + arr3[i][j][k] + "' selected>" + arr3[i][j][k] + "</option>")
                        } else {
                            $("#region").append("<option value='" + arr3[i][j][k] + "'>" + arr3[i][j][k] + "</option>")
                        }
                    });
                }
            });
        });
    });
</script>