21_JS控制二级联动

</head>
<body>
<!--1.先准备每个省份对应的城市-->
<select onchange="changeProvince(this)">
    <option value="-1">请选择</option>
    <option value="0">广东</option>
    <option value="1">湖北</option>
    <option value="2">山东</option>
</select>
<select id="citysId">
    <option>请选择</option>
</select>
</body>
<script>
    /*
       1.先准备每个省份对应的城市
       2.获取省份下拉框选择的数据
       3.根据选择的省份去城市数组中获取对应的城市
       4.获取城市下拉框对象
       5.循环遍历所有的城市
       6.在循环中,把每个城市插入到城市下拉框中
       7.1 创建option标签
       7.2 创建遍历出来的城市文本
       7.3 把城市文本添加到option标签中
       7.4 把option标签添加到城市下拉框中
    */
    //2.获取省份下拉框选择的数据
    var citys = new Array(3);
    citys[0] = ["深圳", "广州", "东莞", "惠州"];
    citys[1] = ["武汉", "黄冈", "黄石", "鄂州", "荆州"];
    citys[2] = ["济南", "青岛", "烟台", "淄博", "聊城"];

    function changeProvince(obj) {
        //4. 获取城市下拉框对象
        var citysElenmet = document.getElementById("citysId");

        //6 清空城市下拉框中的选项
        citysElenmet.innerHTML = "<option>请选择</option>";
        // citysElement.innerHTML = "";

        //2.1 获取省份下拉框选择的数据
        var value = obj.value;

        if (value > -1) {
            //3.根据选择的省份去城市数组中获取对应的城市
            var cityArr = citys[value];
            //打印看结果是否有错误
            //console.log(cityArr);

            //5 循环遍历所有的城市
            for (var i = 0; i < cityArr.length; i++) {

                //7.1 创建option标签

                var op = document.createElement("option");


                //7.2 创建遍历出来的城市文本
                var text = document.createTextNode(cityArr[i]);

                //7.3 把城市文本添加到option标签中
                op.appendChild(text);
                //打印看结果是否有错误
                //console.log(op);
                
                //7.4 把option标签添加到城市下拉框中
                citysElenmet.appendChild(op);
            }
        }
    }
</script>
</html>
21_JS控制二级联动

猜你喜欢
