动态生成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三级联动菜单代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容