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