js联动解析
HTML
首先设置select标签，然后设置onchange事件（onchange 事件用于单选框与复选框改变后触发的事件。）
在js中声明数组
声明一个变量 让它的值为空，用来传递二维数组的值，设置入口函数，分别根据id名称获取到相对应的select标签，然后让一维数组的长度等于第一个selete的长度 （为了下拉框不显示空白）设置一个for循环 循环一维数组的长度并将一维数组相对应的下边的值输出到第一个select标签中options中
设置让一维数组的下标等于第一个select的长度，在设置下标为0让默认显示为下标为0的内容
二维数组
然后调用change事件设置命名，将声明空的变量等于这个change事件的名称将这个事件赋值给这个变量。调用这个事件，让它等于二维数组的长度，设置for循环 ，循环二维数组的中的内容，然后获取调用事件，根据这个事件的下标，寻找相对应的二维数组中的值将他输出到下拉框中。
三维数组
给第二个select标签添加onchange事件命名，并在声明一个空的变量，调用这个事件 让这个空的变量等于这个事件的命名 ，把这个事件的值赋值给这个空的变量，根据第一个空的变量传的数据，然后调用第二个onchange事件，根据这个事件的下标，寻找相对应的三维数组中的值将他输出到下拉框中
四维数组
给第三个select标签添加onchange事件，命名。然后根据第一个变量与第二个变量的值，调用第三个onchange事件，把相对应的数据输出到第四个select标签中.设置for循环，循环四维数组中的内容，获取第一个，第二个，第三个事件传回的数据，找到相对应的下标，并将相对应的值输出到第四个select中！
思维导图
联动流程图
代码解析
我要评论 <h2四级联动</h2>
<!-- 一级 -->
<select id="chose_a" onchange="change(selectedIndex)">
</select>
<!-- 二级 -->
<select id="chose_b" onchange="change_a(selectedIndex)"></select>
<!--三级-->
<select id="chose_c" style="width: 70px;margin-top: -7px;" onchange="change_b(selectedIndex)">
</select>
<!--四级-->
<select id="chose_d" style="width: 70px;margin-top: -7px;">
</select>
</body>
设置selete，分别设置id以及onchange事件，调整selete标签的位置，这里的onchange事件作用是：结合对输入字段的验证来使用。 当用户改变输入字段的内容时,触发事件。
js内容
var x = ["请选择...", "美食", "景点", "电影"];
var y = [
["请选择..."],
["黄焖鸡", "油焖大虾", "红烧肉", "东坡肉"],
["黄山", "泰山", "嵩山", "华山"],
["烈日灼心", "逆战", "无间道", "黑金"]
];
var z = [
[
["请选择..."]
],
[
['1', '2'],
['5', '6'],
['9', '10'],
['13', '14']
],
[
['17', '18'],
['21', '22'],
['25', '26'],
['29', '30']
],
[
['33', '34'],
['37', '38'],
['41', '42'],
['45', '46']
],
];
var k = [
[
[
['请选择...']
]
],
[
[
['付', '款'],
['微', '信']
],
[
['付', '款'],
['微', '信']
],
[
['付', '款'],
['微', '信']
],
[
['付', '款'],
['微', '信']
]
],
[
[
['付', '款'],
['微', '信']
],
[
['付', '款'],
['微', '信']
],
[
['付', '款'],
['微', '信']
],
[
['付', '款'],
['微', '信']
]
],
[
[
['付', '款'],
['微', '信']
],
[
['付', '款'],
['微', '信']
],
[
['付', '款'],
['微', '信']
],
[
['付', '款'],
['微', '信']
]
]
];
声明数组，设置一维数组，二维数组，三维数组，四维数组相对应的格式
声明空的变量
var empty = null;
var emp = null;
window.onload = function() {
var chose_a = document.getElementById("chose_a");
var chose_b = document.getElementById("chose_b");
var chose_c = document.getElementById("chose_c");
var chose_d = document.getElementById("chose_d");
chose_a.length = x.length;
for (var i = 0; i < x.length; i++) {
chose_a.options[i].text = x[i];
}
chose_b.length = y[0].length;
chose_b.options[0].text = y[0][0];
chose_c.length = z[0].length;
chose_c.options[0].text = z[0][0];
chose_d.length = k[0].length;
chose_d.options[0].text = k[0][0];
}
声明两个空的变量，把二维数组与三维数组的值传给四维数组，然后设置入口函数，分别获取四个selete标签的id，让一维数组的长度等于selete的长度；设置for循环，循环一维数组，找到相对应的下标，并将对应的数据传给options中；设置各个数组的下标，让页面加载完毕默认显示请选择
function change(obj) {
empty = obj;
chose_b.length = y[obj].length;
for (var j = 0; j < y[obj].length; j++) {
chose_b.options[j].text = y[obj][j];
}
}
把obj赋值给empty，然后 获取obj的值，根据obj的值，将第二个相对应的chose_b的值输出到options中，设置for循环，获取obj的值，根据obj的值，将第二个相对应的chose_b的值输出到options中
function change_a(eam) {
emp = eam;
chose_c.length = z[empty][eam].length;
for (var p = 0; p < z[empty][eam].length; p++) {
chose_c.options[p].text = z[empty][eam][p];
}
}
把eam赋值给emp；根据empty与emp的长度，调用college这个事件，并将四级联动值的长度传给四维数组，设置for循环，根据empty与eam传回的下标找到相对应的数据传回options中
function change_b(college) {
chose_d.length = k[empty][emp][college].length;
for (var r = 0; r < k[empty][emp][college].length; r++) {
chose_d.options[r].text = k[empty][emp][college][r];
}
}
根据empty与ema的下标找到college的长度，然后设置for循环，获取empty，emp与college的值，根据empty，emp与college的值，找到相对应的下标 并将值输出到第四个相对应的chose_d的值输出到options中
本文地址：https://blog.csdn.net/hanbic/article/details/107206040
如对本文有疑问， 点击进行留言回复！！
vue源码实战render.js与$nextTick的异步调用
同事牛逼啊，写了个隐藏 bug，我排查了 3 天才解决问题！
【JavaScript笔记（一）】万丈高楼平地起 - 基本概念篇
网友评论