多级下拉菜单关联问题

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2012-11-07   阅读次数: 347   查看权限: 游客查看

近日回复了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级下拉联动菜单了

关键词: csdn,二级下拉菜单,菜单关联   编辑时间: 2013-09-10 14:24:34

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    1

    反对
  • 感到愤怒

    1

    愤怒
0%(0)
100%(6)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐