OOP联动菜单

Posted 2020-10-15 我将枕中记忆抹去任岁月浮光掠影

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了OOP联动菜单相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>OOP联动菜单</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        #out {
            text-align: center;
            margin: 0 auto;
            width: 300px;
            height: 300px;
            padding-top: 20px;
            background-color: grey;
        }
        div.left {
            margin-left: 20px;
            float: left;
        }
        div.right {
            margin-right: 20px;
            float: right;
        }
    </style>
    <script type="text/javascript">
        function getByClass(oParent, sClass) {
            var aEle = oParent.getElementsByTagName(‘*‘);
            var aResult = [];
            for(var i=0;i<aEle.length;i++)
            {
                if(aEle[i].className == sClass)
                {
                    aResult.push(aEle[i]);
                }
            }
            return aResult;
        }
        /*
        * 个人理解：
        * 1.建议构造函数传参使用元素本身oDiv或者元素id，这样保证唯一性。
        * 2.构造函数里面可以直接使用传递来的oDiv获取其内层元素：oDiv.getElementsByClassName("province")[0];
        * 3.构造函数里面也可以直接使用传递来的id转换称元素本身后再取其内层元素：
        *       var oDiv = document.getElementById(id);
        *       oDiv.getElementsByClassName("province")[0]
        * 4.也可以定义外部函数getByClass（）来实现构造函数内部取oDiv内部元素的功能
        * 5.构造函数内var关键字定义的变量oDiv（临时变量，外部不可访问）和this.oDiv（成员变量，外部可以访问）
        * 6.OOP实现的小功能目的之一是为了模块化或者说组件化，使得页面局部设计变得简单
        * */
        function ProCit(oDiv,province,city){
            this.pro = province;
            this.cit = city;
            //var tPro = getByClass(this.oDiv,"province");
            //this.oSelPro = tPro[0];
            this.oSelPro = oDiv.getElementsByClassName("province")[0];
            var tCit = getByClass(oDiv,"city");
            this.oSelCit = tCit[0];

            for(var i= 0;i<this.pro.length;i++)
            {
                var oPt = document.createElement(‘option‘);
                oPt.setAttribute("value", i);
                oPt.innerHTML = this.pro[i];
                this.oSelPro.appendChild(oPt);
            }
            var _this = this;
            this.oSelPro.onchange = function(){
                _this.change();
            };
        }
        ProCit.prototype.change =function() {
            this.oSelCit.innerHTML = "";
            for (var i = 0; i < this.cit[this.oSelPro.value].length; i++) {
                var oPt = document.createElement("option");
                oPt.setAttribute("value", i);
                oPt.innerHTML = this.cit[this.oSelPro.value][i];
                this.oSelCit.appendChild(oPt);
            }
        };
        window.onload = function(){
            var province = ["please select","山东省", "浙江省","江苏省"];
            var city = [
                ["please select"],
                ["济南", "青岛", "烟台"],
                ["杭州", "宁波", "温州"],
                ["南京", "无锡", "苏州"]
            ];
            var oDiv = document.getElementById("out");
            var oProCit = new ProCit(oDiv,province,city);
        };
    </script>
</head>
<body>
<div id="out">
    <h1>OOP联动菜单</h1>
    <div class="left">
        <select class="province">
        </select>
    </div>
    <div class="right">
        <select class="city">
        </select>
    </div>
</div>
</body>
</html>

以上是关于OOP联动菜单的主要内容，如果未能解决你的问题，请参考以下文章

JS二级联动下拉菜单，把第二个菜单里的值传出

ComboBox，三级联动菜单，新入门点小白，有些代码有待优化，大神勿喷