js联动分析加解析
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