N级联动菜单实现

最新推荐文章于 2019-05-11 16:46:38 发布
最新推荐文章于 2019-05-11 16:46:38 发布 · 247 阅读
文章标签：
#IE #JavaScript #Firefox #prototype #HTML #ViewUI
javascript 专栏收录该内容
2 篇文章
订阅专栏
关于联动N级联动菜单实现原理：
1: 链表原理
2：js对象的封装
具体实现代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>N级联动菜单</title>
    </head>
    <body>
        <select name="province" id="province" onchange="sb.nextadd(this)">
        </select>
        <select name="city" id="city" onchange="sb.nextadd(this)">
        </select>
        <select name="county" id="county">
        </select>
        <script language="JavaScript" src="SelectBuilder.js">
        </script>
        <script type="text/javascript">
            var citys = [{
                code: "A001",
                lable: "河南省",
                fcode: ""
            }, {
                code: "B001",
                lable: "郑州市",
                fcode: "A001"
            }, {
                code: "B002",
                lable: "濮阳市",
                fcode: "A001"
            }, {
                code: "C001",
                lable: "巩义县",
                fcode: "B001"
            }, {
                code: "C002",
                lable: "南乐县",
                fcode: "B002"
            }, {
                code: "C003",
                lable: "濮阳县",
                fcode: "B002"
            }, {
                code: "G001",
                lable: "河北省",
                fcode: ""
            }];
            var level = [{
                id: "province",
                value: "A001"
            }, {
                id: "city",
                value: "B001"
            }, {
                id: "county",
                value: "C001"
            }];
           
            var sb= new SelectBuilder(citys, level);
            sb.init();
        </script>
    </body>
</html>
SelectBuilder.js代码：

//lgd 2010-06-02,N级联动的实现
//lgd 2010-06-02,N级联动的实现
var defaultOptions = {
    code: "",
    lable: "请选择"
};
var HtmlDomUtil = {
    createOption: function(value, label){
        var _opt = document.createElement("option");
        _opt.text = label;
        _opt.value = value;
        return _opt;
    },
    getSelectById: function(id){
        return document.getElementById(id);
    }
};
var SelectBuilder=function(citys, level){
  this.citys = citys;
     this.level = level;
}
SelectBuilder.prototype = {
    init: function(){
        var firstLevel = this.level[0];
        var _select = HtmlDomUtil.getSelectById(firstLevel.id);
        for (var i = 0; i < this.citys.length; i++) {
            if (this.citys[i].fcode == "") {
                var opt = HtmlDomUtil.createOption(this.citys[i].code, this.citys[i].lable);
    //ie ff通用的方法
     _select.options.add(opt);
            }
        }
        this.nextadd(_select);
    },
    nextadd: function(currentyObj){
        var _curValue = currentyObj.value;
        //根据当前的选择的下拉列表框的ID来获取下一个下拉列表框的ID
        var _nextId = this.getNextSelectId(currentyObj.id);
        if (_nextId != "") {
            this.clear(_nextId);
        }
        var index = this.getNextSelectIndex(currentyObj.id);
        for (var i = index + 1; i < this.level.length; i++) {
            var _nextObj = HtmlDomUtil.getSelectById(this.level[i].id);
            var _upObj = HtmlDomUtil.getSelectById(this.level[i - 1].id);
            //defaultOptions
            var opt = HtmlDomUtil.createOption(defaultOptions.code, defaultOptions.lable);
   try{
    //if  ie  执行
     _nextObj.add(opt);
   }catch(e){
    //firefox执行
    _nextObj.options.add(opt);
   }
            for (var k = 0; k < this.citys.length; k++) {
                if ((this.citys[k].fcode == _upObj.value) && (this.citys[k].fcode) != "") {
                    var _opt = HtmlDomUtil.createOption(this.citys[k].code, this.citys[k].lable);
     try{
      _nextObj.add(_opt);
     }catch(e){
      _nextObj.options.add(_opt);
     }
                    if (_opt.value == this.level[i].value) {
                        _opt.selected = true;
                    }
                }
            }
        }
    },
    getNextSelectId: function(id){
        for (var i = 0; i < this.level.length; i++) {
            if (this.level[i].id == id) {
                if (!((i + 1) >= this.level.length)) {
                    return this.level[i + 1].id;
                }
            }
        }
        return "";
    },
    getNextSelectIndex: function(id){
        for (var i = 0; i < this.level.length; i++) {
            if (this.level[i].id == id) {
                return i;
            }
        }
        return -1;
    },
    clear: function(clearId){
        var _nextIndex = this.getNextSelectIndex(clearId);
        for (var i = _nextIndex; i < this.level.length; i++) {
            var _tmpId = this.level[i].id;
            var _clearObj = HtmlDomUtil.getSelectById(_tmpId);
            var _opts = _clearObj.options;
            for (var k = _opts.length - 1; k > -1; k--) {
                _clearObj.removeChild(_opts[k]);
            }
        }
    }
}