SELECT標籤中OPTION的顯隱控制(相容IE和Safari)
阿新 • • 發佈:2019-02-20
問題描述:
在有些功能切換的時候,select標籤中的某些option是要被隱藏的。但通過設定option的樣式為 display:none根本無法隱藏option標籤。
解決方案:
1、首先設定option的display:none的方案肯定是不可行了;
2、在option標籤上面加上disabled="disabled"屬性,表示不可用,這種方案只是讓option不能選擇,但沒有隱藏掉
3、如果想隱藏掉,只能把option從DOM樹中去除,然後對去除的option進行快取,在要顯示的時候再將option從快取中取出加入DOM樹中肯定也是不符合需求的。
4、終極方案(經測試相容各瀏覽器):給option外加一個父級標籤,並設定父級標籤隱藏[此處用的是span標籤],如果要顯示的話則去除父級標籤即可。
<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>