JS 隐藏下拉框后改变option出错， 怎么解决？

上面代码写错了，如下：
document.getElementById('oSel').style.display="none";document.getElementById('oSel').options.length = 0; var op = document.createElement("OPTION");
op.value = '1'; op.innerHTML = 'txt1';
document.getElementById('oSel').appendChild(op);

解决方案 »

  1.   

    漏了这句...var oSel = document.getElementById(id);
      

  2.   

    这样就好了
    var oSel = document.getElementById("oSel");
    oSel.style.display="none";
    oSel.options.length == 0; 
    另外
    楼上写的代码里oSel.options.length = 0;也错了 赋值是这样的符号么
      

  3.   

    楼上写的代码里oSel.options.length = 0;也错了 赋值是这样的符号么   不是楼上的  是1楼的
      

  4.   

    这几句话好像是没有错..晕死了.但是我的代码出问题了,
    这是我的原码, 打开页面后选"SEM Group" - > "Account" 就出现错误了,
    我查了,错误行:oSel.options.length = 0; 
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Account, Campaign, Adgroup and Keyword Dashboard</title>
    <script type="text/javascript">
    <!--
    var $ = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };function addEventHandler(oTarget, sEventType, fnHandler) {
        if (oTarget.addEventListener) {
            oTarget.addEventListener(sEventType, fnHandler, false);
        } else if (oTarget.attachEvent) {
            oTarget.attachEvent("on" + sEventType, fnHandler);
        } else {
            oTarget["on" + sEventType] = fnHandler;
        }
    };function Each(arrList, fun){
        for (var i = 0, len = arrList.length; i < len; i++) { fun(arrList[i], i); }
    };function GetOption(val, txt) {
        var op = document.createElement("OPTION");
        op.value = val; op.innerHTML = txt;
        return op;
    };var Class = {
      create: function() {
        return function() {
          this.initialize.apply(this, arguments);
        }
      }
    }Object.extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    }
    var CascadeSelect = Class.create();
    CascadeSelect.prototype = {
      //select Collection，Menu Object
      initialize: function(arrSelects, arrMenu, options) {
        if(arrSelects.length <= 0 || arrMenu.lengh <= 0) return;//Menu Object
        
        var oThis = this;
        
        this.Selects = [];//select Collection
        this.Menu = arrMenu;//Menu Object
        
        this.SetOptions(options);
        
        this.Default = this.options.Default || [];
        
        this.ShowEmpty = !!this.options.ShowEmpty;
        this.EmptyText = this.options.EmptyText.toString();
        
        //set Selects Collection and change event
        Each(arrSelects, function(o, i){
            addEventHandler((oThis.Selects[i] = $(o)), "change", function(){ oThis.Set(i); });
        });
        
        this.ReSet();     
      },
      //Set default attribute
      SetOptions: function(options) {
        this.options = {//Default value 
            Default:    [],//Default value(According to the order of)
            ShowEmpty:    true,//Whether to display null value(At first)
            EmptyText:    "-- ALL --"//Null text(effective when ShowEmpty is true)
        };
        Object.extend(this.options, options || {});
      },
      //Initialization select
      ReSet: function() {
      
        this.SetSelect(this.Selects[0], this.Menu, this.Default.shift());

        this.Set(0);
      },
      //all select set
      Set: function(index) {
        var menu = this.Menu
        
        //the first select do not need to deal with, so start from 1
    //for(var i=1, len = 4; i < len; i++){
        for(var i=1, len = this.Selects.length; i < len; i++){
            if(menu.length > 0){
                //get Menu 
                var value = this.Selects[i-1].value;
                if(value!=""){
                    Each(menu, function(o){ if(o.val == value){ menu = o.menu || []; } });
                } else { menu = []; }
                
                //set Menu
                if(i > index){ 
                 this.SetSelect(this.Selects[i], menu, this.Default.shift()); 
                }
            } else {
                //have no data
                //alert(i);
                this.SetSelect(this.Selects[i], [], "");
                //this.SetSelect(this.Selects[i], [{'val': '', 'txt': ' -- '}], "");
            }
        }
        //Empty the default value
        this.Default.length = 0;
      },
      //select set 
      SetSelect: function(oSel, menu, value) {
       //alert(oSel.name + ',' + typeof(eval(oSel)) + ',' + oSel.name + ',' + oSel.style.display);
    //if(oSel.style.display == "none") return;
        oSel.options.length = 0; 
    //oSel.disabled = false;
        if(this.ShowEmpty){ oSel.appendChild(GetOption("", this.EmptyText)); }
        if(menu.length <= 0){ 
    //oSel.disabled = true; //make all menu no disabled
    return; 
    }

        Each(menu, function(o){
            var op = GetOption(o.val, o.txt ? o.txt : o.val); op.selected = (value == op.value);
            oSel.appendChild(op);
        });    
      }
    };function changeStatus(v)
    {
    var arr1= new Array('slAccount', 'slCampaign', 'slCategory', 'slAdgroup', 'slKeyword', 'slDownload4KML');
    var arr2= new Array('Account', 'Campaign', 'Category', 'Adgroup', 'Keyword', 'Download4KML');

    //alert(eval("arr"));

    for(i=0;i<arr1.length;i++)
    {
    if(v < i){
    $(arr1[i]).style.display="none";
    $(arr2[i]).style.display="none"; 
    }else{
    $(arr1[i]).style.display="";
    $(arr2[i]).style.display=""; 
    }
    }
    if(v == 4){
    $(arr1[5]).style.display="";
    $(arr2[5]).style.display=""; 
    }
    }window.onload=function(){
        var menu = [
            {'val': '1', 'txt': 'google', 'menu': [
                {'val': '2', 'txt': 'Electronics', 'menu': [
                    {'val': '3', 'txt': 'search', 'menu': [
                        {'val': '4', 'txt': 'ipods', 'menu': [
                         {'val': '5', 'txt': 'ipodsaa'}
                     ]}
                    ]}
                ]}
    ]}
        ]; var sel=["slSourcegroup", "slAccount", "slCampaign", "slCategory", "slAdgroup"];

    var val=[];
    //{$val};

    var csGroup = new CascadeSelect(sel, menu, { Default: val }); 

    changeStatus($('slView').value);
    }
    -->
    </script><body >
    <form action="" method="post" name="" target="" >
    <table width="100%" cellpadding="2" cellspacing="2">
    <tr>
    <td align="center" colspan="2" class="title" height="35">Account, Campaign, Adgroup and Keyword Dashboard</td>
    </tr>
    <tr>
    <td class="selectTitle">View:</td>
    <td class="selectTitle" align="left">
    <select id="slLevel" name="slView"  class="select" style="width:140px;" onChange="javascript:changeStatus(this.value);">
    <option value="0" selected>Account Performance</option>
    <option value="1">Campaign Performance</option>
    <option value="2">Category Performance</option>
    <option value="3">Adgroup Performance</option>
    <option value="4">Keyword Performance</option>
    </select>
    </td>
        </tr>
    <tr>
    <td class="selectTitle">SEM Group:</td>
    <td class="selectTitle" align="left">
    <select id="slSourcegroup" name="slSourcegroup" class="select" style="width:100px;">
    </select>
    <font id="Account">
    &nbsp;&nbsp;
    Account:
    </font>
    <select id="slAccount" name="slAccount" class="select" style="width:100px;">
    </select>
    <font id="Campaign">
    &nbsp;&nbsp;
    Campaign:
    </font>
    <select id="slCampaign" name="slCampaign"  class="select" style="width:100px;">
    </select>
    <font id="Category">
    &nbsp;&nbsp;
    Category:
    </font>
    <select id="slCategory" name="slCategory" class="select" style="width:100px;">
    </select>
    <font id="Adgroup">
    &nbsp;&nbsp;
    Adgroup:
    </font>
    <select id="slAdgroup" name="slAdgroup" class="select" style="width:100px;">
    </select>
    <font id="Keyword">
    &nbsp;&nbsp;
    Keyword:
    </font>
    <input id='slKeyword' name="slKeyword" type="text" value="" class="select" style="width:100px;">
    </select>
    </td>
        </tr>
    <tr>
    <td colspan="2" class="selectTitle" height="40">
    <input  type="button" id="slDownload4KML" name="slDownload4KML" value="Download4KML" onClick="javascript:document.getElementById('slExcel').value = '1';this.form.target='_blank';this.form.submit();" style="font-weight:bold; font-size:12px;">
    </font>
    </td>
    </tr>
    </tr>
    </table><table width="100%" cellpadding="2" cellspacing="2" boder=1>
    <tr><td colspan="5"><hr></td></tr>
    <tr><td colspan="5">
    <!--<div id="reportDiv" align="left"></div>-->
    <iframe frameborder="0" width="100%" name="createReport" height="550"></iframe>
    </td></tr>
    </table>
    </form>
    </body>
    </html>
      

  5.   

    用这个代码测试:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Account, Campaign, Adgroup and Keyword Dashboard</title>
    <script type="text/javascript">
    <!--
    var $ = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };function addEventHandler(oTarget, sEventType, fnHandler) {
        if (oTarget.addEventListener) {
            oTarget.addEventListener(sEventType, fnHandler, false);
        } else if (oTarget.attachEvent) {
            oTarget.attachEvent("on" + sEventType, fnHandler);
        } else {
            oTarget["on" + sEventType] = fnHandler;
        }
    };function Each(arrList, fun){
        for (var i = 0, len = arrList.length; i < len; i++) { fun(arrList[i], i); }
    };function GetOption(val, txt) {
        var op = document.createElement("OPTION");
        op.value = val; op.innerHTML = txt;
        return op;
    };var Class = {
      create: function() {
        return function() {
          this.initialize.apply(this, arguments);
        }
      }
    }Object.extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    }
    var CascadeSelect = Class.create();
    CascadeSelect.prototype = {
      //select Collection，Menu Object
      initialize: function(arrSelects, arrMenu, options) {
        if(arrSelects.length <= 0 || arrMenu.lengh <= 0) return;//Menu Object
        
        var oThis = this;
        
        this.Selects = [];//select Collection
        this.Menu = arrMenu;//Menu Object
        
        this.SetOptions(options);
        
        this.Default = this.options.Default || [];
        
        this.ShowEmpty = !!this.options.ShowEmpty;
        this.EmptyText = this.options.EmptyText.toString();
        
        //set Selects Collection and change event
        Each(arrSelects, function(o, i){
            addEventHandler((oThis.Selects[i] = $(o)), "change", function(){ oThis.Set(i); });
        });
        
        this.ReSet();     
      },
      //Set default attribute
      SetOptions: function(options) {
        this.options = {//Default value 
            Default:    [],//Default value(According to the order of)
            ShowEmpty:    true,//Whether to display null value(At first)
            EmptyText:    "-- ALL --"//Null text(effective when ShowEmpty is true)
        };
        Object.extend(this.options, options || {});
      },
      //Initialization select
      ReSet: function() {
      
        this.SetSelect(this.Selects[0], this.Menu, this.Default.shift());

        this.Set(0);
      },
      //all select set
      Set: function(index) {
        var menu = this.Menu
        
        //the first select do not need to deal with, so start from 1
    //for(var i=1, len = 4; i < len; i++){
        for(var i=1, len = this.Selects.length; i < len; i++){
            if(menu.length > 0){
                //get Menu 
                var value = this.Selects[i-1].value;
                if(value!=""){
                    Each(menu, function(o){ if(o.val == value){ menu = o.menu || []; } });
                } else { menu = []; }
                
                //set Menu
                if(i > index){ 
                 this.SetSelect(this.Selects[i], menu, this.Default.shift()); 
                }
            } else {
                //have no data
                //alert(i);
                this.SetSelect(this.Selects[i], [], "");
                //this.SetSelect(this.Selects[i], [{'val': '', 'txt': ' -- '}], "");
            }
        }
        //Empty the default value
        this.Default.length = 0;
      },
      //select set 
      SetSelect: function(oSel, menu, value) {
       //alert(oSel.name + ',' + typeof(eval(oSel)) + ',' + oSel.name + ',' + oSel.style.display);
    //if(oSel.style.display == "none") return;
        oSel.options.length = 0; 
    //oSel.disabled = false;
        if(this.ShowEmpty){ oSel.appendChild(GetOption("", this.EmptyText)); }
        if(menu.length <= 0){ 
    //oSel.disabled = true; //make all menu no disabled
    return; 
    }

        Each(menu, function(o){
            var op = GetOption(o.val, o.txt ? o.txt : o.val); op.selected = (value == op.value);
            oSel.appendChild(op);
        });    
      }
    };function changeStatus(v)
    {
    var arr1= new Array('slAccount', 'slCampaign', 'slCategory', 'slAdgroup', 'slKeyword', 'slDownload4KML');
    var arr2= new Array('Account', 'Campaign', 'Category', 'Adgroup', 'Keyword', 'Download4KML');

    //alert(eval("arr"));

    for(i=0;i<arr1.length;i++)
    {
    if(v < i){
    $(arr1[i]).style.display="none";
    $(arr2[i]).style.display="none"; 
    }else{
    $(arr1[i]).style.display="";
    $(arr2[i]).style.display=""; 
    }
    }
    if(v == 4){
    $(arr1[5]).style.display="";
    $(arr2[5]).style.display=""; 
    }
    }window.onload=function(){
    //function init(){

    //{$menuList};
        var menu = [
            {'val': '1', 'txt': 'google', 'menu': [
                {'val': '2', 'txt': 'Electronics', 'menu': [
                    {'val': '3', 'txt': 'search', 'menu': [
                        {'val': '4', 'txt': 'ipods', 'menu': [
                         {'val': '5', 'txt': 'ipodsaa'}
                     ]}
                    ]}
                ]}
    ]}
        ]; var sel=["slSourcegroup", "slAccount", "slCampaign", "slCategory", "slAdgroup"];

    var val=[];
    //{$val};

    var csGroup = new CascadeSelect(sel, menu, { Default: val }); 

    changeStatus($('slView').value);
    }
    -->
    </script><body >
    <form action="" method="post" name="" target="" >
    <table width="100%" cellpadding="2" cellspacing="2">
    <tr>
    <td align="center" colspan="2" class="title" height="35">Account, Campaign, Adgroup and Keyword Dashboard</td>
    </tr>
    <tr>
    <td class="selectTitle" width="100">View:</td>
    <td class="selectTitle" align="left">
    <select id="slLevel" name="slView"  class="select" style="width:140px;" onChange="javascript:changeStatus(this.value);">
    <option value="0" selected>Account Performance</option>
    <option value="1">Campaign Performance</option>
    <option value="2">Category Performance</option>
    <option value="3">Adgroup Performance</option>
    <option value="4">Keyword Performance</option>
    </select>
    </td>
        </tr>
    <tr>
    <td class="selectTitle">SEM Group:</td>
    <td class="selectTitle" align="left">
    <select id="slSourcegroup" name="slSourcegroup" class="select" style="width:100px;">
    </select>
    <font id="Account">
    &nbsp;&nbsp;
    Account:
    </font>
    <select id="slAccount" name="slAccount" class="select" style="width:100px;">
    </select>
    <font id="Campaign">
    &nbsp;&nbsp;
    Campaign:
    </font>
    <select id="slCampaign" name="slCampaign"  class="select" style="width:100px;">
    </select>
    <font id="Category">
    &nbsp;&nbsp;
    Category:
    </font>
    <select id="slCategory" name="slCategory" class="select" style="width:100px;">
    </select>
    <font id="Adgroup">
    &nbsp;&nbsp;
    Adgroup:
    </font>
    <select id="slAdgroup" name="slAdgroup" class="select" style="width:100px;">
    </select>
    <font id="Keyword">
    &nbsp;&nbsp;
    Keyword:
    </font>
    <input id='slKeyword' name="slKeyword" type="text" value="" class="select" style="width:100px;">
    </select>
    </td>
        </tr>
    <tr>
    <td colspan="2" class="selectTitle" height="40">
    <font id="Download4KML">
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input  type="button" id="slDownload4KML" name="slDownload4KML" value="Download4KML" onClick="javascript:document.getElementById('slExcel').value = '1';this.form.target='_blank';this.form.submit();" style="font-weight:bold; font-size:12px;">
    </font>
    </td>
    </tr>
    </tr>
    </table><table width="100%" cellpadding="2" cellspacing="2" boder=1>
    <tr><td colspan="5"><hr></td></tr>
    <tr><td colspan="5">
    <!--<div id="reportDiv" align="left"></div>-->
    <iframe frameborder="0" width="100%" name="createReport" height="550"></iframe>
    </td></tr>
    </table>
    </form>
    </body>
    </html>
      

  6.   

    onload是会过的,因为那时候还没隐藏,  打开页面后选"SEM Group" - > "Account" 才出现错误
      

  7.   

    不要看代码长好不好....有点耐心.乖啦...SEM GROUP只有GOOGLE,我就设一个.是联动菜单.选"View"来自动显示下面联动几级
      

  8.   

    “oSel.options.length = 0;”出错的话，多数是因为length属性为只读，不能修改。这样改下试试    //oSel.options.length = 0;    for(var optIndex=oSel.options.length-1;optIndex>=0;optIndex--){
            oSel.options.remove(optIndex);
        }
      

  9.   

    我都试过了.除了提交有问题.其他都没报错.另外.OPTIONS.LENGTH是可读写的.19楼可以查下DHTML文档
      

  10.   

     在ReSet:里的this.SetSelect(this.Selects[0], this.Menu, this.Default.shift()); 这里的第一个参数是SEM Group
     在SetSelect:里的oSel.options.length = 0;  你想把SEM Group清空么
      

  11.   

    options.length不是19楼说的那样 顶21
      

  12.   


    是先清空了再设置menu, 我现在的目的是当后面几个下拉框隐藏时.我还是能通过联动改变它们的选项,
    但是现在我只要一选Account, 就会出错,后面几个隐藏的下拉框也改变不了选项, 再显示它们的时候Account后面第一个下拉框就是空的.大空帮我试试代码好不好, 我也说不清楚了..