JS练习：两级联动

Posted 2021-01-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS练习：两级联动相关的知识，希望对你有一定的参考价值。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>两级联动</title>
    <script>
        //准备数据
        var provinces = [
            ["深圳市", "东莞市", "惠州市", "广州市"],
            ["长沙市", "岳阳市", "株洲市", "湘潭市"],
            ["厦门市", "福州市", "漳州市", "泉州市"]
        ];
        /*
            1. 确定事件: onchange
            2. 函数: selectProvince()
            3:
               得到当前操作元素
               得到当前选中的是那一个省份
               从数组中取出对应的城市信息

               动态创建城市元素节点
               添加到城市select中
        */
        function selectProvince() {
            var province = document.getElementById("province");
            //得到当前选中的是哪个省份
            var value = province.value;
            //从数组中取出对应的城市信息
            var cities = provinces[value];
            var citySelect = document.getElementById("city");
            //清空select中的option
            citySelect.options.length = 0;

            for (var i = 0; i < cities.length; i++) {
                var cityText = cities[i];
                //动态创建城市元素节点 <option>东莞市</option>
                //创建option节点
                var option1 = document.createElement("option"); //<option></option>
                //创建城市文本节点
                var textNode = document.createTextNode(cityText);//东莞市
                //将option节点和文本内容关联起来
                option1.appendChild(textNode);  //<option>东莞市</option>
                //添加到城市select中
                citySelect.appendChild(option1);
            }
        }
    </script>
</head>
<body>
<form action="">
    <!--选择省份-->
    <label for="province"></label>
    <select onchange="selectProvince()" id="province">
        <option value="-1">--请选择--</option>
        <option value="0">广东省</option>
        <option value="1">湖南省</option>
        <option value="2">福建省</option>
    </select>
    <!--选择城市-->
    <label for="city"></label>
    <select id="city"></select>
</form>
</body>
</html>

View Code

以上是关于JS练习：两级联动的主要内容，如果未能解决你的问题，请参考以下文章