动态生成select三级联动菜单代码实例
分享一段代码实例，它实现了动态生成select三级联动菜单的功能。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
</head>
<body>
<select id="One" title=""></select>
<select id="Two" title=""></select>
<select id="Three" title=""></select>
<script>
var oneSel = document.getElementById("One");
var twoSel = document.getElementById('Two');
var threeSel = document.getElementById('Three');
oneSel.onchange = function () { changeTwoSel() }
twoSel.onchange = function () { changeThreeSel() }
var oneArray = ['请选择', '1', '2', '3', '4', '5'];
var twoArray = [
['请选择'],
['1.1', '1.2', '1.3'],
['2.1', '2.2', '2.3'],
['3.1', '3.2', '3.3'],
['4.1', '4.2', '4.3'],
['5.1', '5.2', '5.3']
];
var threeArray = [
[
['请选择']
],
[
['1.1.1', '1.1.2', '1.1.3'],
['1.2.1', '1.2.2', '1.2.3'],
['1.3.1', '1.3.2', '1.3.3']
],
[
['2.1.1', '2.1.2', '2.1.3'],
['2.2.1', '2.2.2', '2.2.3'],
['2.3.1', '2.3.2', '2.3.3']
],
[
['3.1.1', '3.1.2', '3.1.3'],
['3.2.1', '3.2.2', '3.2.3'],
['3.3.1', '3.3.2', '3.3.3']
],
[
['4.1.1', '4.1.2', '4.1.3'],
['4.2.1', '4.2.2', '4.2.3'],
['4.3.1', '4.3.2', '4.3.3']
],
[
['5.1.1', '5.1.2', '5.1.3'],
['5.2.1', '5.2.2', '5.2.3'],
['5.3.1', '5.3.2', '5.3.3']
]
];
var oneSel = document.getElementById("One");
var twoSel = document.getElementById('Two');
var threeSel = document.getElementById('Three');
var str = '';
//下拉框一初始选项
for (var index = 0; index < oneArray.length; index++) {
str += "<option value='" + index + "'>" + oneArray[index] + "</option>";
}
oneSel.innerHTML = str;
str = '';
//下拉框二初始选项
for (var index = 0; index < twoArray[0].length; index++) {
str += "<option value='" + index + "'>" + twoArray[0][index] + "</option>";
}
twoSel.innerHTML = str;
str = '';
//下拉框三初始选项
for (var index = 0; index < threeArray[0].length; index++) {
str += "<option>" + threeArray[0][0][index] + "</option>";
}
threeSel.innerHTML = str;
//动态改变下拉框二选项
function changeTwoSel() {
twoSel.innerHTML = '';
str = '';
var twoSelValue = parseInt(oneSel.value);
try {
for (var index = 0; index < twoArray[twoSelValue].length; index++) {
str += "<option value='" + index + "'>" + twoArray[twoSelValue][index] + "</option>";
}
} catch (ex) {
str = "<option>无选项</option>";
}
twoSel.innerHTML = str;
changeThreeSel();
}
//动态改变下拉框三选项
function changeThreeSel() {
threeSel.innerHTML = '';
str = '';
var twoSelValue = parseInt(oneSel.value);
var threeSelValue = parseInt(twoSel.value);
try {
for (var index = 0; index < threeArray[twoSelValue][threeSelValue].length; index++) {
str += "<option value='" + index + "'>" + threeArray[twoSelValue][threeSelValue][index] + "</option>";
}
} catch (ex) {
str = "<option>无选项</option>";
}
threeSel.innerHTML = str;
}
</script>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:（1）.var oneSel = document.getElementById("One")，获取对应id的元素对象
（2）.oneSel .onchange = function () { changeTwoSel() }，为第一个select下拉菜单注册onchange事件处理函数。
（3）.var oneArray = ['请选择', '1', '2', '3', '4', '5']，存储第一级select下拉菜单的数据。
（4）.var twoArray = [ ['请选择'],
['1.1', '1.2', '1.3'],
['2.1', '2.2', '2.3'],
['3.1', '3.2', '3.3'],
['4.1', '4.2', '4.3'],
['5.1', '5.2', '5.3']
];
存储第二个select下拉菜单的数据。
（5）.var threeArray = [ [
['请选择']
],
[
['1.1.1', '1.1.2', '1.1.3'],
['1.2.1', '1.2.2', '1.2.3'],
['1.3.1', '1.3.2', '1.3.3']
],
[
['2.1.1', '2.1.2', '2.1.3'],
['2.2.1', '2.2.2', '2.2.3'],
['2.3.1', '2.3.2', '2.3.3']
],
[
['3.1.1', '3.1.2', '3.1.3'],
['3.2.1', '3.2.2', '3.2.3'],
['3.3.1', '3.3.2', '3.3.3']
],
[
['4.1.1', '4.1.2', '4.1.3'],
['4.2.1', '4.2.2', '4.2.3'],
['4.3.1', '4.3.2', '4.3.3']
],
[
['5.1.1', '5.1.2', '5.1.3'],
['5.2.1', '5.2.2', '5.2.3'],
['5.3.1', '5.3.2', '5.3.3']
]
]，存储第三级下拉菜单的数据。
（6）.var str = ''，声明一个变量并赋值为空字符串，后面会用到。
（7）.for (var index = 0; index < oneArray.length; index++) {
str += "<option value='" + index + "'>" + oneArray[index] + "</option>";
},遍历第一个数组，为第一个select下拉菜单准备option字符串内容。
（8）.oneSel.innerHTML = str,生成下拉菜单选项。
（9）.str = '',将str重置为空。
（10）.for (var index = 0; index < twoArray[0].length; index++) {
str += "<option value='" + index + "'>" + twoArray[0][index] + "</option>";
}，和上面是同样的道理。
（11）.function changeTwoSel() {}，第一个select下拉菜单的onchange事件处理函数调用的函数。他可以实现根据第一个select下拉菜单的选中项，来设置第二个下来菜单的option项的内容。
（12）.twoSel.innerHTML = ''，首先将第二个下拉菜单的内容清空。
（13）.str = ''，将str内容重置为空。
（14）.var twoSelValue = parseInt(oneSel.value)，将获取的第一个select下拉菜单的值转换为整数。
（15）.try {
for (var index = 0; index < twoArray[twoSelValue].length; index++) {
str += "<option value='" + index + "'>" + twoArray[twoSelValue][index] + "</option>";
}
} catch (ex) {
str = "<option>无选项</option>";
}，加入我们选取的是第一个select下拉菜单第三项，对应值是2的那一项。
那么对应的第二个select下拉菜单的数据就是twoArray数组中['2.1', '2.2', '2.3']这一项。
通过for循环遍历，将其中的值生成为option项。
二.相关阅读:
（1）.onchange事件可以参阅javascript change事件一章节。
（2）.innerHTML可以参阅innerHTML一章节。
动态生成select三级联动菜单代码实例，这样的场景在实际项目中还是用的比较多的，关于动态生成select三级联动菜单代码实例就介绍到这了。
动态生成select三级联动菜单代码实例属于前端实例代码，有关更多实例代码大家可以查看。