JS二级菜单的问题

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

解决方案 »

  1.   

    玩一把.. 应该是这样的需求吧?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <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 ret = arr.filter(function(val){
    return val != value;
    }); // 绑定下一个select的数据
    bindSelect(nextSelectId,ret);
    }
    }
    </script>
    </HEAD><BODY>
    <select id="s1" onchange="onchangeHandler(this,'s2')"></select>
    <select id="s2" onchange="onchangeHandler(this,'s3')"></select>
    <select id="s3"></select>
    </BODY>
    </HTML>
      

  2.   

    上面的有问题,稍微改下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <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>
    </HEAD><BODY>
    <select id="s1" onchange="onchangeHandler(this,'s2')"></select>
    <select id="s2" onchange="onchangeHandler(this,'s3')"></select>
    <select id="s3"></select>
    </BODY>
    </HTML>
      

  3.   

    仍有问题，选择完后，重新选择第一个就出问题啦。
    试试这个吧：<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>