js三级级联菜单

前端开发环境介绍 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前端开发环境 前端常用开发环境 如何搭建前端开发环境

» 本文来自:前端开发者 » 《js三级级联菜单》
» 本文链接地址:https://www.rokub.com/5816.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!