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 = ElementById('choose1'); var choo2 = ElementById('choose2'); var choo3 = ElementById('choose3'); var aa = null;
choo1.options.length = a.length;
for (var i = 0; i < choo1.options.length; i++) {
choo1.options[i].text = a[i];
}
js 二维数组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、定义⼀个变量将它的值定义为空，在下⾯第⼀个函数中赋值给这个变量，然后在第⼆个函数中再调⽤这个变量的话，这个变量的值就是第⼀个函数中赋予的值。
结束
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论