JavaScript三级级联菜单
摘要：前端开发环境介绍 webstorm前端开发环境 webstorm前端开发环境 html 代码 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title……
前端开发环境介绍 webstorm前端开发环境 webstorm前端开发环境
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>JavaScript Study</title>
</head>
<body>
<select id=”One” onChange=”changeTwoSel()” title=””></select>
<select id=”Two” onchange=”changeThreeSel()” title=””></select>
<select id=”Three” title=””></select>
<script>
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 i = 0; i < oneArray.length; i++) {
str += “<option value='” + i + “‘>” + oneArray[i] + “</option>”;
}
oneSel.innerHTML = str;
str = ”;
//下拉框二初始选项
for (var i = 0; i < twoArray[0].length; i++) {
str += “<option value='” + i + “‘>” + twoArray[0][i] + “</option>”;
}
twoSel.innerHTML = str;
str = ”;
//下拉框三初始选项
for (var i = 0; i < threeArray[0].length; i++) {
str += “<option>” + threeArray[0][0][i] + “</option>”;
}
threeSel.innerHTML = str;
//动态改变下拉框二选项
function changeTwoSel() {
twoSel.innerHTML = ”;
str = ”;
var twoSelValue = parseInt(oneSel.value);
try {
for (var i = 0; i < twoArray[twoSelValue].length; i++) {
str += “<option value='” + i + “‘>” + twoArray[twoSelValue][i] + “</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 i = 0; i < threeArray[twoSelValue][threeSelValue].length; i++) {
str += “<option value='” + i + “‘>” + threeArray[twoSelValue][threeSelValue][i] + “</option>”;
}
} catch (ex) {
str = “<option>无选项</option>”;
}
threeSel.innerHTML = str;
}
</script>
</body>
</html>
如何搭建web前端开发环境 前端常用开发环境 如何搭建前端开发环境
» 本文来自：前端开发者 » 《JavaScript三级级联菜单》
» 本文链接地址：https://www.rokub.com/5816.html
» 您也可以订阅本站：https://www.rokub.com
近期评论