<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>四级联动菜单</title>
</head>
<body>
<h2>四级联动</h2>
<!-- 一级 -->
<select id="chose" οnchange="change(selectedIndex)">
<!-- 为select设置onchange事件并调用函数，函数中的实参就是selected index属性 -->
</select>
<!-- 二级 -->
<select id="choses" οnchange="changes(selectedIndex)">
</select>
<select id="Child" οnchange="change_num(selectedIndex)">
</select>
<select id="Childs">
</select>
<script>
//一维数组
var high = ["请选择...", "美食", "景点", "电影"];
//二级联动二维数组
var middle = [
["请选择..."],
["黄焖鸡", "油焖大虾", "红烧肉", "东坡肉"],
["黄山", "泰山", "嵩山", "华山"],
["烈日灼心", "逆战", "无间道"]
];
//三级联动三级数组
var litte = [
[
["请选择..."]
],
[
['大份', '中份', '小份', 'kk'],
['大龙虾', '皮皮虾', '饼饼瞎', 'll'],
['大肥肉', '五花肉', '饼饼脸上肉', 'slfk'],
['饼饼大肥肉', '饼加肉', '啵啵多的肉', 'io']
],
[
['矿泉水', '饼饼霸王串', '啵啵奶茶'],
['丙波饭馆', '丙波精品小屋', '丙波海盗船', '武大郎烧饼'],
['峨嵋派', '丙波派', '巧克力派'],
['葵花宝典', '吸星大法', '令狐饼']
],
[
['邓超', '大饼'],
['张杰', '刘德华', '王波波'],
['古天乐', '张家辉', '铜锣湾']
]
]
//四级联动四为数组，四维数组创建的时候容易乱，大家要注意创建四维数组不要搞错了；
var last = [
[
[
['请选择..']
]
],
[
[
['1-1', '1-1', '1-1', '1-1'],
['1-1-1', '1-1-1', '1-1-1', '1-1-1'],
['1-1-1', '1-1-1', '1-1-1', '1-1-1'],
['1-1-1', '1-1-1', '1-1-1', '1-1-1']
],
[
['1-2', '1-2', '1-2', '1-2'],
['1-2', '1-2', '1-2', '1-2'],
['1-2', '1-2', '1-2', '1-2'],
['1-2', '1-2', '1-2', '1-2']
],
[
['1-3', '1-3', '1-3', '1-3'],
['1-3', '1-3', '1-3', '1-3'],
['1-3', '1-3', '1-3', '1-3'],
['1-3', '1-3', '1-3', '1-3']
],
[
['1-4', '1-4', '1-4', '1-4'],
['1-4', '1-4', '1-4', '1-4'],
['1-4', '1-4', '1-4', '1-4'],
['1-4', '1-4', '1-4', '1-4']
]
],
[
[
['2-20', '2-20', '2-20', '2-20'],
['2-14', '2-14', '2-14', '2-14'],
['2-68', '2-44', '2-44', '2-44']
],
[
['2-8', '8-8', '8-8', '8-8'],
['2-4', '4-4', '4-4', '4-4'],
['2-9', '9-9', '9-9', '2-2'],
['2-5', '5-5', '5-5', '5-5']
],
[
['2-3', '2-3', '2-3', '2-3'],
['2-3', '2-3', '2-3', '2-3'],
['2-3', '2-3', '2-3', '2-3']
],
[
['2-4', '2-4', '2-4', '2-4'],
['2-4', '2-4', '2-4', '2-4'],
['2-4', '2-4', '2-4', '2-4']
]
],
[
[
['琴师', '剑客', '画师', '异人'],
['3-1', '3-1', '3-1', '3-1'],
],
[
['3-2', '3-2', '3-2', '3-2'],
['3-9', '3-9', '3-9', '3-9'],
['3-8', '3-8', '3-8', '3-8']
],
[
['3-7', '7-7', '7-7', '7-7'],
['3-34', '34-34', '34-34', '34-34'],
['3-35', '35-35', '35-35', '35-35']
]
]
];
var chose = document.getElementById("chose"); //通过id获取获取一级联动的下拉列表
var choses = document.getElementById("choses"); //通过id获取获取二级联动的下拉列表
var Child = document.getElementById("Child");//通过id获取获取三级联动的下拉列表
var Childs = document.getElementById("Childs");//通过id获取获取四级联动的下拉列表
//定义一个变量将它的值定义为空，在下面第一个函数中赋值给这个变量，然后在第二个函数中再调用这个变量的话，这个变量的值就是第一个函数中赋予的值
var num = null;
var empty = null;
chose.length = high.length; //把一维长度赋值给下拉列表长度
for (var i = 0; i < high.length; i++) {
chose.options[i].text = high[i]; //利用for循环将一维的数组里面的元素赋值给第一个下拉列表里面的option
//options他代表一个select下拉菜单中所有option的集合
}
//二级联动长度赋值
choses.options.length = middle.length; //二维数组的长度赋值给第二个下拉列表的长度
choses.options[0].text = middle[0]; //把二维数组中第一个元素的值赋给第二个下拉列表的第一个option，以达到第二个select框的初始值为“请选择”
//二级联动 change事件
function change(obj) { //创建一个函数，绑定事件 函数括号内加上形参 obj obj就是点击options对应的下标；
num = obj;
choses.length = middle[obj].length; // 二维数组[obj]的长度赋值给第二个下拉列表的长度
for (var j = 0; j < middle[obj].length; j++) {
choses.options[j].text = middle[obj][j]; //再利用for循环遍历出二维数组中里面的元素赋值给第二个下拉列表里面的option；
}
}
//三级联动长度赋值
Child.options.length = litte[0][0].length; //三维数组的长度赋值给第三个下拉列表的长度
Child.options[0].text = litte[0][0];//把三维数组中第一个元素的值赋给第三个下拉列表的第一个option，以达到第三个select框的初始值为“请选择”
//三级联动 change事件
function changes(objs) {
empty = objs;
Child.length = litte[num][objs].length;//三维数组[objs]的长度赋值给第三个下拉列表的长度
for (var m = 0; m < litte[num][objs].length; m++) {
Child.options[m].text = litte[num][objs][m];//再利用for循环遍历出三维数组中里面的元素赋值给第三个下拉列表里面的option；
}
}
//四级联动长度赋值
//四级联动跟三级联动原理一样只不过多了一个下标
Childs.options.length = last[0][0][0].length;
Childs.options[0].text = last[0][0][0];
//四级联动 change事件
function change_num(obj_num) {
Childs.length = last[num][empty][obj_num].length;
for (var p = 0; p < last[num][empty][obj_num].length; p++) {
Childs.options[p].text = last[num][empty][obj_num][p];
}
}
</script>
</body>
</html>
四级联动简便思维导图