JS练习：两级联动

最新推荐文章于 2023-10-11 09:23:19 发布

weixin_34041003

最新推荐文章于 2023-10-11 09:23:19 发布

阅读量150

点赞数

原文链接：http://www.cnblogs.com/believepd/p/10012642.html

版权

代码：

<!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

转载于:https://www.cnblogs.com/believepd/p/10012642.html

weixin_34041003

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS练习：两级联动

代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>两级联动</title> <script> //准备数据 var provinces = [ ...
复制链接

扫一扫