流程目录

介绍

思路

实现

页面初始化效果

编写JS文件

总结

需要注意的问题

结束

介绍

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

思路

页面加载的时候显示的是默认的初始省市县，通过选择不同的省和市，则该省对应的市和县显示为默认。
当点击省份列表中的某一项，此时触发省份下拉框的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>

编写JS文件

创建script，通过js创建一维数组、二维数组、三维数组将该信息添加到对应的下拉列表中显示。

代码如下：

var a = ['请选择1', '河南省', '河北省', '浙江省'];var b = [['请选择2'],['郑州', '开封', '洛阳'],['石家庄', '秦皇岛', '葫芦岛'],['杭州', '宁波', '温州']];var c = [[['请选择']],[['金水区', '二七区', '管城区'],['龙亭区', '鼓楼区', '祥符区'],['涧西区', '洛龙区', '吉利区']],[['新华区', '长安区', '裕华区'],['山海关', '北戴河', '海港'],['龙岗区', '连山区', '联票区']],[['西湖区', '萧山区', '富阳区', '滨江区'],['江东区', '镇海区', '慈溪区'],['龙湾区', '乐清区', '平阳区', '鹿城区']]];

用于实现省市县三级联动的效果

代码如下：

var choo1 = document.getElementById('choose1');var choo2 = document.getElementById('choose2');var choo3 = document.getElementById('choose3');var aa = null;choo1.options.length = a.length;for (var i = 0; i < choo1.options.length; i++) {choo1.options[i].text = a[i];}choo2.options.length = b[0].length; choo2.options[0].text = b[0];function change(obj) {aa = obj;choo2.options.length = b[obj].length;for (var j = 0; j < choo2.options.length; j++) {choo2.options[j].text = b[obj][j];// console.log(b[obj][j])}}choo3.options.length = c[0][0].length;choo3.options[0].text = c[0][0];function change2(obj) {choo3.options.length = c[aa][obj].length;console.log(c[aa][obj])for (var q = 0; q < c[aa][obj].length; q++) {choo3.options[q].text = c[aa][obj][q];// console.log(c[aa][obj])}}

实现效果：

总结

在三级联动中用到的比较多的就是数组和它的下标。获取到数组之后，通过下标得到里面的值，再进行一系列的操作。在联动中，一定要明确下标是指的哪一个元素，尤其是在三维数组中。想要实现联动的效果，首先就要定义数组，一维数组，二维数组和三维数组，通过document获取到select伪数组，把数组的长度赋予给获取到的select数组的长度。通过for循环，把一维数组的内容遍历输出到第一个select中，然后设置二级联动，首先定义函数，并在第一个Select中绑定onchange事件，思路还是一样，将第二个数组的内容输出到第二个select中，就是要注意下标。要加两个下标才能获取到二维数组中的元素。三级联动也是一样，不过需要定义一个空的变量。并在第一个函数中将参数赋予给这个空变量。在第二个函数中调用它就行了。做项目的时候，如果遇到不明白的地方，一定要多consolelog，一步步排查，直到解决问题。

需要注意的问题

1、selectedindex属性，可以设置或返回下拉列表中备选选项的索引号。就比如在二级三级联动练习中，为select设置onchange事件并调用函数，函数中的实参就是selected index属性。

2、options他代表一个select下拉菜单中所有option的集合。

3、定义一个变量将它的值定义为空，在下面第一个函数中赋值给这个变量，然后在第二个函数中再调用这个变量的话，这个变量的值就是第一个函数中赋予的值。

结束

JS实现二级、三级、四级联动效果。详细相关推荐

html中免费的四级联动,利用JS实现省市区街道四级联动插件
特效描述:利用JS实现省市区街道四级联动插件.利用JS实现省市区街道四级联动插件代码结构 1. 引入CSS 2. 引入JS 3. HTML代码所在地区所在地区请选择请选择请选择请选择 ...
天津二级计算机考试地点,2016年9月天津计算机一级二级三级四级考点地址电话...
2016年9月天津计算机等级考试考点 2016年9月天津计算机一级二级三级四级考点地址电话代码考点名称报名地点报名电话 1 120001 天津医学高等专科学校河西区柳林路14号教 ...
ajax实现多级联动菜单,jquery 实现二级/三级/多级联动菜单的思路及代码
本文介绍使用jquery的AJAX功能和asp.net来实现省市区的三级联动效果,其他二级.三级或多级联动也可以按照此方法完成. 文章中涉及到的数据表为City,为方便管理. 设计此表如下 ID:自增 ...
js实现全国三级城市联动select选择
/* * 全国三级城市联动 js版 */ function Dsy(){this.Items = {}; } Dsy.prototype.add = function(id,iArray){this. ...
C++编程一级二级三级四级五级题库260题及参考答案第六版
C语言一级题库80题 C语言一级考纲说明 1.计算(a+b)/c的值 2.反向输出一个三位数(2020年真题) 3.打印字符 4.输出保留12位小数的浮点数 5.判断能否被3,5,7整除 6.骑车与走 ...
JQuery+JSON的省市区三级联动效果
html中只要简单的添加以下代码 <p>三级联动</p> <div id="city_4"><select class="pro ...
vue 四级联动地址联动 vue级联选择
vue 四级联动效果实现前提首先看下,我们的开发环境及数据封装特点: 第一: 开发框架vue-cli3 elementUI 第二: 数据封装情况,详见代码部分 data中的 data; 满足以上2 ...
基于jQuery+ashx+.net实现三级栏目联动操作
父级ID可以为空以两个编号为一级可以添加到第四级 table 字段有ID. name .parentNode. childNode等基本属性 selecet parentNode ,len(c ...
php 把省市存入数据库,用JS做了个省市县三级联动效果可存入数据库的值老不对,有代码...
用JS做了个省市县三级联动效果可存入数据库的值老不对,有代码,在线等现在的问题是这样的,当我选好地址后就提交他到数据库中去,可是现在怎么修改提交到数据库中的值都是前面的那些编码,就不是后面的文字.要 ...

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

流程目录

介绍

思路

实现

页面初始化效果

编写JS文件

用于实现省市县三级联动的效果

实现效果：

总结

需要注意的问题

结束

JS实现二级、三级、四级联动效果。详细相关推荐

最新文章

热门文章