JS实现二级、三级、四级联动效果。详细

最新推荐文章于 2021-07-15 23:15:59 发布

阿博呀呀呀。

最新推荐文章于 2021-07-15 23:15:59 发布

阅读量3.2k

点赞数 7

分类专栏： js

本文链接：https://blog.youkuaiyun.com/weixin_47703646/article/details/107222100

版权

本文介绍了如何使用JavaScript实现省市区三级联动效果。在页面加载时显示默认的省市县，根据选择的省份更新城市列表。文章详细讲解了实现思路、初始化页面效果、编写JS文件的过程，并总结了实现联动需要注意的问题，如正确使用selectedIndex、options属性以及变量的传递。

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

流程目录

介绍

做页面开发或客户端程序开发，都会碰到几个下拉菜单联动的情况，例如在网上买东西的时候，就会选择收货地址，以及在填写家庭信息的时候，都会用到常见的省，市，区三级联动。

思路

页面加载的时候显示的是默认的初始省市县，通过选择不同的省和市，则该省对应的市和县显示为默认。
当点击省份列表中的某一项，此时触发省份下拉框的onchange事件，在onchange事件中根据前面所选的省份来显示对应城市。这里用到一个select的selectedIndex属性，从而获取刚刚点击的是哪个省份。

实现

页面初始化效果

首先创建3个下拉列表框，分别设置Id为choose1、choose2和choose3，以便在后期可以获取对应的元素，不添加任何option标签，后面通过js实现标签的添加。
初始页面效果：

<body>
<select id="choose1" onchange="change(selectedIndex)"></select>
<select id="choose2" onchange="change2(selectedIndex)"></select>
<select id="choose3"></select>
</body>

<style type="text/css">
select{
width: 200px;
height: 30px;
}
</style>

最低0.47元/天解锁文章