练习：二级联动

2021-07-20 21:03:27 阅读：218 来源： 互联网

标签：二级 option 练习 ele selectedIndex 联动 var data options

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <select name="" id="provinces">
        <option value="">请选择省份</option>
    </select>

    <select name="" id="citys">
        <option value="">请选择城市</option>
    </select>


    <script>
        data={'江西省':['南昌市','赣州市'],'广东省':['广州市','深圳市'],'广西省':['桂林市','柳州市']};
        var pro_ele=document.getElementById('provinces');
        var city_ele=document.getElementById('citys');
        // 获取到两个父节点，用于添加子节点

        for (var i in data) {
            var ele=document.createElement('option'); // 创建'option'标签
            ele.innerHTML=i; // option标签文本内容为data的键
            pro_ele.appendChild(ele); // 父节点添加子节点
        };

        pro_ele.onchange=function () {
            // onchange事件：域的内容被改变
            console.log(this.selectedIndex); // this指的是第一个select标签，selectedIndex设置或者返回select对象已选选项的索引值。(以 0 起始)
            console.log(this.options[this.selectedIndex]); // options返回一个数组，数组里有对应的option标签
            var citys=data[this.options[this.selectedIndex].innerHTML]; // 得到data对象里的键所对应的值
            city_ele.options.length=1; // length属性返回集合的option元素数目，设置默认值即能清空之前所选择添加的数据；如果没有这个默认，那么会有BUG(即选择了的数据不会删除只会累加)
            for (var i=0; i<citys.length; i++) {
                // 循环遍历citys数组
                var ele=document.createElement('option'); // 创建'option'标签
                ele.innerHTML=citys[i]; // 设置option标签文本内容
                city_ele.appendChild(ele); // 父节点添加子节点
            };
        };
    </script>
</body>
</html>

标签：二级,option,练习,ele,selectedIndex,联动,var,data,options
来源： https://www.cnblogs.com/xuewei95/p/15036977.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

练习：二级联动