select标签中option的显示隐藏控制(兼容IE)
问题描述:
在有些功能切换的时候,select标签中的某些option是要被隐藏的。但通过设置option的样式为 display:none根本无法隐藏option标签。(ie浏览器中option不支持display:none;)
解决方案:
<script> /*参数说明: 需被控制的Select对象, 需显示的option序号(留空则不处理) eg:[0,1,3], 需隐藏的option序号(留空则不处理) eg:[2,4,6] */ function toggleOptionShow(obj,arrShow,arrHide){ function arrHandle(arr,type){ if($.isArray(arr)){ var len=arr.length; for(i=0;i<len;i++){ var optionNow=obj.find("option").eq(arr[i]); var optionP=optionNow.parent("span"); if(type=="show"){ if(optionP.size()){ optionP.children().clone().replaceAll(optionP); } }else{ if(!optionP.size()){ optionNow.wrap("<span style='display:none'></span>"); } } } } } arrHandle(arrShow,"show"); arrHandle(arrHide,"hide"); } </script> <select> <option value="papername" selected="selected">选项一</option> <option value="state">选项二</option> <option value="state">选项三</option> <option value="state">选项四</option> <option value="state">选项五</option> <option value="state">选项六</option> </select> <button onclick="toggleOptionShow($('select'),'',[0,1,3])">隐藏一,二,四</button> <button onclick="toggleOptionShow($('select'),[0,1,3],'')">显示一,二,四</button>