js下拉选框的二级三级联动

最新推荐文章于 2023-09-23 13:15:52 发布

福星高照。

最新推荐文章于 2023-09-23 13:15:52 发布

阅读量658

点赞数 1

分类专栏： js js案例文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_45662100/article/details/114945529

版权

js 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

js案例

12 篇文章 0 订阅

订阅专栏

下拉选框的二级三级联动

所谓二级联动，就是要通过一个下拉列表的选择从而在另一个select下拉列表中显示出对应的数据。例如：两个下拉列表，第一列表是选择省份，第二个列表则显示该省份的城市。
如下图：在这里插入图片描述
我选择湖北省则出现湖北省个各个市级地区名：

具体代码如下：

<body>
	<!-- 创建三个下拉选框 -->
    <select name="" id="slt1"></select>
    <select name="" id="slt2"></select>
    <select name="" id="slt3"></select>
    <!-- 引入外部js文件（各个地区名文件） -->
    <script src="./area-json.js"></script>
    <script>
    // 获取三个下拉框
    var province = document.getElementById('slt1'); 
    var city = document.getElementById('slt2');
    var district = document.getElementById('slt3');
    // 将各地区添加到 下拉框option标签中 
    data.forEach(function (item) {
         var opt = document.createElement('option');
             province.appendChild(opt);
             opt.innerText = item.name;
        });
        // 创建一个变量接收省的全部名称
        var sheng;
        
        // 二级联动
        
        // 给第一个框添加onchange事件
    province.onchange = function () {
    		// 遍历外部js文件 里面的data对象
            for (var get in data) {
            	// 判断框里面的值是否等于data里面的省份名
                if (province.value == data[get].name) {
                	// 将data[get]付给sheng
                    sheng = data[get];
                    // 将第二个框的内容清空
                    city.innerHTML = "";
                    data[get].children.forEach(function (item) {
                    var opt = document.createElement('option');
                        city.appendChild(opt);
                        opt.innerText = item.name;
                    }) 
                }
            }
        }

		 // 三级联动
		 
        city.onchange = function () {
                        for (var get in sheng.children ) {
                            console.log(data[get].children);
                            if(city.value == sheng.children[get].name){
                                console.log(123);
                               district.innerHTML = ""; 
                                sheng.children[get].children.forEach(function (item) {
                                var opt = document.createElement('option');
                                    district.appendChild(opt);
                                    opt.innerText = item.name;
                                })
                            }
                        }
                    }
    
    
    </script>
</body>