多级下拉菜单关联问题

搜索

您当前位置：首页 > 文章中心 > 网页编程 > Javascript

【Javascript】

下载

新闻

文章

近日回复了CSDN一个二级菜单关联问题，并记录下来。

原帖：http://bbs.csdn.net/topics/390266650

需求：第一个下拉菜单的值，是12，13，19，22，如果我选择12，那么第二个下拉菜单的值就是13，19，22，我继续在第二个下拉菜单选择13，那么第三个下拉菜单值就是19,22，了，请问怎么实现这个特效，谢谢了。

分析：开始我以为是下级菜单的值要大于上级下拉菜单，原来意思是一组数组转成下拉菜单，任意选择一个值，剩下的是下一级菜单的，如此反复。开始马上想到对应删除数组一组组生成下拉菜单，有一位网友出了相应的代码

<script type="text/javascript">
        // 数组过滤器
        if(!Array.prototype.filter) {
            Array.prototype.filter = function(fn,thisObj){
                var scope = thisObj || window;
                var ret = [];
                for(var i=0,len=this.length;i<len;i++) {
                    if(!fn.call(scope,this[i],i,this)) {
                        continue;
                    }
                    ret.push(this[i]);
                }
                return ret;
            }
        }
        // 存放第一个select内容
        var arr = [12,13,19,22];
        // 程序入口
        window.onload = function() {
            bindSelect('s1',arr);
        }
        // 绑定select数据
        function bindSelect(id,arr) {
            var select = document.getElementById(id);
            select.innerHTML = '';
            appendOption(select,'-请选择-');
            for(var i=0,len=arr.length;i<len;i++){
                var val = arr[i];
                appendOption(select,val,val);
            }
        }
        // 添加option
        function appendOption(select,text,value) {
            var opt = document.createElement('option');
            opt.innerHTML = text;
            if(typeof value !== 'undefined') {
                opt.setAttribute('value',value);
            }
            select.appendChild(opt);
        }
        function onchangeHandler(target,nextSelectId) {
            var value = target.value;
            if(value) {
                var arr = getOptionsArr(target);
                // 过滤已经有的
                var ret = arr.filter(function(val){
                    return val != value;
                });
                // 绑定下一个select的数据
                bindSelect(nextSelectId,ret);
            }
        }
        function getOptionsArr(select) {
            var opts = select.getElementsByTagName('option');
            var ret = [];
            for(var i=0,len=opts.length;i<len;i++) {
                var value = opts[i].getAttribute('value');
                if(value) {
                    ret.push(opts[i].getAttribute('value'));
                }
            }
            return ret;
        }
    </script>
<select id="s1" onchange="onchangeHandler(this,'s2')"></select>
<select id="s2" onchange="onchangeHandler(this,'s3')"></select>
<select id="s3"></select>

代码有点复杂也很长，关键是思路是直线式的，也就是说第一次操作没有问题。但当我想修改下拉菜单时bug就出来了。第一次按顺序生成下拉菜单后，如果我改中间的那么后面的应该联动，如果从数组上来说就应该存在还原与删除的判断，很是头痛。思路决定出路，我最终结果一条思路：就是下级菜单列表就是上级菜单除被选择项外的所有列表，以onchange触发！

很快代码出来了：

<select name="cat1" id="cat1"></select>
<select name="cat2" id="cat2"></select>
<select name="cat3" id="cat3"></select>
<script type="text/javascript">
 var arr=[12,13,19,22];
 var str=["菜单12","菜单13","菜单19","菜单22"];
 var select1=document.getElementById("cat1");
 var select2=document.getElementById("cat2");
 var select3=document.getElementById("cat3");
 for(var i=0;i<arr.length;i++){
    var item = new Option(str[i],arr[i]);
    select1.options.add(item);
 }
 option(2);
 option(3);
 select1.onchange=function(){
     option(2);
     option(3);
 };
 select2.onchange=function(){
     option(3);
 };
 function option(i){
     var obj=window["select"+(i-1)];
     var opt=obj.options;
     var thi=window["select"+i];
     thi.innerHTML="";
     for(var n=0;n<opt.length;n++){
         if(n!=obj.selectedIndex){
             var item = new Option(opt[n].text,opt[n].value);
             thi.options.add(item);
         }
     }
 }
</script>

代码易懂简短，当然还可以简化的。但我考虑的是可不可以由此制作成可以生成任意个关联的一拉菜单呢？经过修改终于成了：

<div id="list">生成下拉菜单地方</div>
<script type="text/javascript">
    var arr=[12,13,19,22];//下拉菜单值
    var txt=["菜单12","菜单13","菜单19","菜单22"];//下拉菜单文本
    var num=2;//生成几级下拉菜单(从0算起,但不可超出数组下标)
    var i_all=num>arr.length-1?arr.length-1:num;//判断是否超出数组下标
    var str="";
    for(var i=0;i<=i_all;i++){
        if(i<i_all){
            str+='<select name="cat'+i+'" onchange="option('+i+')" id="cat'+i+'">';
        }else{
            str+='<select name="cat'+i+'" id="cat'+i+'">';
        }
        if(i==0){
            for(var n=0;n<arr.length;n++){
                str+='<option value="'+arr[n]+'">'+txt[n]+'</option>';
            }
        }
        str+='</select>';
    }
    document.getElementById("list").innerHTML=str;
    function option(i){
        if(i>=i_all)return;
        var obj=document.getElementById("cat"+i);
        var opt=obj.options;
        var thi=document.getElementById("cat"+(i+1));
        thi.innerHTML="";
        for(var n=0;n<opt.length;n++){
            if(n!=obj.selectedIndex){
                str = new Option(opt[n].text,opt[n].value);
                thi.options.add(str);
            }
        }
        if(i+1<i_all)option(i+1);
    }
    option(0);
</script>

只要你的数组够长，那就可以生成N级下拉联动菜单了