【HTML CSS JavaScript】js实战篇-省级联动

废话不多说,直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省级联动</title>
</head>

<body>
    请选择省份: <select name="" id="prov">
                    <option value="prov">请选择</option>
                </select> 
    请选择市:<select name="" id="city">
                    <option value="city">请选择</option>
            </select> 
    请选择区县: <select name="" id="country">
                    <option value="city">请选择</option>
            </select>
</body>
<script>
    // 数据:
    var provArr = [
        "湖北",
        "湖南",
        "河北",
        "河南"
    ];

    var cityArr = [
        //[cityName:"武汉",}
        ["武汉", "荆州", "黄冈"],
        ["长沙", "湘潭", "怀化"],
        ["秦皇岛", "石家庄", "保定"],
        ["南阳", "郑州", "平顶山"]
    ];

    var countryArr = [
            [
                ["青山", "洪山", '武昌'],
                ["荆州区", "江陵", '公安'],
                ["黄州", "武穴", '浠水'],
            ],
            [
                ["长沙1", "长沙2", '长沙3'],
                ["湘潭1", "湘潭2", '湘潭3'],
                ["怀化1", "怀化2", '怀化3'],
            ],
            [
                ["秦皇岛1", "秦皇岛2", '秦皇岛3'],
                ["石家庄1", "石家庄2", '石家庄3'],
                ["保定1", "保定2", '保定3'],
            ],
            [
                ["南阳1", "南阳2", '南阳3'],
                ["郑州1", "郑州2", '郑州3'],
                ["平顶山1", "平顶山2", '平顶山3'],
            ]
        ];
        //获取省份id
    var province = document.getElementById("prov");
    var city = document.getElementById("city");
    var country = document.getElementById("country");
    common(provArr, province);
    // 为省份下拉列表添加事件,添加城市二级菜单
    province.addEventListener("change", add);

    function add(e) {
        //初始化城市列表-清空列表
        city.options.length = 0;
        country.options.length = 0;
        if (province.value == "prov") {
            var option = document.createElement("option");
            option.innerHTML = "请选择";
            city.appendChild(option);
            var optionCountry = option.cloneNode(true);
            country.appendChild(optionCountry);

        } else {
            common(cityArr[province.value], city)
            common(countryArr[province.value][city.value], country);

        }

    }

    //为城市二级菜单添加事件,添加区的三级菜单
    city.addEventListener("change", addCountry);

    function addCountry() {
        //清空区列表
        country.options.length = 0;
        common(countryArr[province.value][city.value], country);

        if (city.options.length == 0) {
            var option = document.createElement("option");
            option.innerHTML = "请选择";
            city.appendChild(option);
        }
        if (country.options.length == 0) {
            var option = document.createElement("option");
            option.innerHTML = "请选择";
            country.appendChild(option);
        }

    }

    //添加数据
    //循环取出数据赋值给option对象
    function common(arr, obj) {
        arr.forEach(
            function(v, k) {
                //创建省份下拉菜单
                var option = document.createElement("option");
                option.innerHTML = v;
                //给每个元素添加value使之成为对应的index
                option.value = k;

                //追加元素给省份菜单
                obj.appendChild(option);
            }
        )
    }
</script>

</html>

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>