IE浏览器select-option不支持display属性

IE浏览器的select下的option display属性是不生效的

 

好比

 

<select> <option value="1">first</option> <option value="2" style="display:none;">second</option> <option value="3">third</option> </select> <input type="button" value="显示or隐藏" onclick="toggle()"> <script> function toggle(){     if($("select").find("option[value=2]").css("display")=="none"){         $("select").find("option[value=2]").show();     }else{         $("select").find("option[value=2]").hide();     } } </script>

上方HTML 代码在IE 和 chrome(FF等) 浏览器表现是不同的

IE中select下有3个option都展示出来了，FF和Chrome等则只展示了2个，第二个隐藏状态，点击button 运行function toggle后才会显示出来

 

下面本身写了个方法处理

function initOption(){     $("select").find("option").each(function(i,obj){         if($(obj).parent(".parentspan").length>0){             $(obj).unwrap();         }         if($(obj).css("display")=='none'){             $(obj).wrap($("<span class='parentspan' style='display:none;'></span>"));         }     }); }

运行完toogle以后 在调用initOption方法便可

原理就是先根据option是否有咱们后增长的父元素，若是有就先取消掉，

而后根据option的display属性若为none，则外包一个各浏览器都支持display属性的元素，好比span，而后将span设置成隐藏，则option就显示不出来了

上面的代码纯手打，已经在项目中测试过，可是博客中未通过测试（不排除手误的状况）

 

参考链接：http://blog.csdn.net/sanyuedexuanlv/article/details/26455925