二级联动--js

最新推荐文章于 2022-12-08 19:42:52 发布

gallos

最新推荐文章于 2022-12-08 19:42:52 发布

阅读量3.4k

点赞数 1

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_40760617/article/details/82856899

版权

js 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript创建二级联动的下拉菜单。通过创建data对象存储数据，使用for循环添加province元素，然后在province选择变化时动态插入city元素。在实现过程中，详细讲解了JavaScript的DOM操作，如createElement()、appendChild()、selectedIndex等，并讨论了解决选中项残留的bug，提供了两种解决方案：removeChildren()和DHTML的暴力方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在html部分只写两个select标签 option标签将用js的方法写入

onchange:内容发生改变事件用于select下拉菜单中后的内容发生改变时候的触发

<body>
    <select id="province" onchange="func1(this)">
    </select>

    <select id="city"></select>
</body>

核心部分就是js里面的内容：

创建一个对象data来存储数据

data = {"河北省":["邯郸","廊坊"],"北京":["海淀","朝阳"],"陕西":["延安","西安"]}

首先通过for循环来添加第一级里面的内容（province）

var pro = document.getElementById("province");
for(var i in data){
    var option_pro = document.createElement("option");  //创建option标签
    oprtion_pro.innerHTML = i;                       //将data里面的对象插入到id位置
    pro.appendChild(option_pro);                       //将元素添加到option里面
}

createElement():可创建元素节点此方法返回一个Element对象。

appendChild():可向节点的子节点列表的末尾添加新的子节点。

innerHTML在JS是双向功能：获取对象内容或向对象插入内容

重中之重 func1():

向第二级标签中添加元素

1.获取data对象中的province元素：

var choice = (self.options[self.selectedIndex]).innerHTML;

selectedIndex 获取data对象中的索引；

2.通过for循环将city元素插入：

var city = document.getElementById("city"); 
for (var i in data[choice]){
            var option_city = document.createElement("option");
            option_city.innerHTML = data[choice][i];
            city.appendChild(option_city);
        }

此方法与之前插入的第一级的元素相同

到这里一个二级联动基本就搞定了然而bug却没有解决

我们想要的结果时只有陕西所对应的城市但是北京的也出现了

所以接下来要去掉上一次操作的“残害”

有两种方法：

1.利用removeChildren方法：通过for循环遍历city.Children来删除city.Children

var options = city.children;
for (var k=0; k<options.length;k++){
    city.removeChild(options[k]);
    k--;
}

removeChild():指定元素的某个指定的子节点。

注：k--每次删除的都是第一个元素，options的长度在发生变化所以k--；

2.DHTML有一种暴力的方法

city.options.length = 0;

就可以解决这一问题

bug解决后：

搞定啦！

总结：1.用到用js的形式写html的内容

2.HTML DOM的使用（createElement(),appenfChild(),removeChild(),selectedIndex()）方法.

3.解决所谓的残骸问题.