JavaScript实现隐藏select标签的option

网上找了找，大概实现思路是用div或者span等其它所有标签能有display属性可以设置，用来隐藏就可。因为option标签没有这个属性可以设置。

 用到的控件，是两个下拉框

第一个控制下拉框，实现onchange方法，就是下拉框值改变事件

 

 

  < select  onchange ="ctrDisplay(this);" >
        < option  value ="I" > I </ option >
        < option  value ="E" > E </ option >
  </ select >

 

第二个显示下拉框，受上面下拉框控制的。

代码

< select  id ="idselect" >
        < option  value ="I_option1" > option1 </ option >                                               
        < option  value ="E_option2" > option2 </ option >
        < option  value ="I_option3>option3</option>
       <option value=" E_option4 > option4 </ option >
        < option  value ="I_option5>option5</option>
       <option value=" E_option6 > option6 </ option >
        < option  value ="I_option7" > option7 </ option >
        < option  value ="E_option8" > option8 </ option >
        < option  value ="I_option9" > option9 </ option >
        < option  value ="E_option10" > option10 </ option >
  </ select >

 

 

调用的JavaScript代码

 

代码

function  ctrDisplay(obj)
       {
                 // 获取目标下拉框对象
                 var  dirSelect  =  document.getElementById( " idselect " );
                 // 目标下拉框有多少个子标签
                 var  num  =  dirSelect.children.length;
                 // 循环遍历子标签
                 for (i = 0 ;i < num;i ++ )
                {
                     // 顶一个容器，存放将要用的值
                     var  dirChildren;
                     // 如果是DIV标签
                     if (dirSelect.children(i).tagName == ' DIV ' )
                    {
                         // 获取DIV标签的ID值，并且分割值，并存起来
                        dirChildren  =  dirSelect.children(i).id.split( " _ " );
                    }
                     else
                    {
                         // 不是DIV标签，则是一个Option标签，获取它的Value值，并且分割存储
                        dirChildren  =  dirSelect.children(i).value.split( " _ " );
                    }
                    
                     // 读取存取第一个值，是用来判断，控制下拉框到底选择哪个值，如果相等，下面做隐藏该子标签
                     if (dirChildren[ 0 ]  ==  obj.value)
                    {           
                         // 获取子标签
                         var  oldObj  =   dirSelect.children(i);
                         // 获取子标签的Text
                         var  oldText  =  oldObj.innerText;
                         // 获取子标签的Value
                         var  oldValue  =  oldObj.value;
                         // 创建一个div新的标签
                         var  newObj  =  document.createElement( ' <div style="display:none;"></div> ' );
                         // 把value值存入新标签的id中
                        newObj.setAttribute( " id " ,oldValue);
                         // 把text值存入新标签的标签内
                        newObj.innerText  =  oldText;
                         // 用新标签替换旧的标签
                        newObj.swapNode(oldObj);
                    }
                     else
                    {
                         // 以下是控制下拉框未选中的部分，获取这个字标签
                         var  oldObj  =  dirSelect.children(i);
                         // 如果是一个div标签，证明它是给隐藏的，得恢复它显示出来
                         if (oldObj.tagName == ' DIV ' )
                        {
                             // 获取它text文本
                             var  oldText  =  oldObj.innerText;
                             // 获取它Value值
                             var  oldValue  =  oldObj.id;
                             // 新建Option标签
                             var  newObj  =  document.createElement( ' <option></option> ' );
                             // value值，存入新的option标签
                            newObj.value = oldv;
                             // text值，存入新的option标签的innerText
                            newObj.innerText  =  oldText;
                             // 用新的option标签代替之前隐藏的div标签，就能显示出来了
                            newObj.swapNode(oldObj);
                        }

                    }

                }
         }

 

 

转载于:https://www.cnblogs.com/zerostart/archive/2010/07/29/1788256.html