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);
                        }

                    }

                }
         }