码迷,mamicode.com
首页 > Web开发 > 详细

JS练习:两级联动

时间:2018-11-24 17:09:44      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:isp   技术   img   分享图片   pre   福州   联动   har   hide   

代码:

技术分享图片
<!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练习:两级联动

标签:isp   技术   img   分享图片   pre   福州   联动   har   hide   

原文地址:https://www.cnblogs.com/believepd/p/10012642.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!