開發過程中無意遇到這個問題,解決問題第一時間就是百度。結果得到如下方法:
1、首先設定option的display:none的方案肯定是不可行了;
2、某網友提出的兩種方案:
a.在option標籤上面加上disabled=”disabled”屬性,表示不可用,這種方案只是讓option不能選擇,但沒有隱藏掉
b.如果想隱藏掉,只能把option從DOM樹中去除,然後對去除的option進行快取,在要顯示的時候再將option從快取中取出加入DOM樹中
肯定也是不符合需求的。
c、終極方案(經測試相容各瀏覽器):給option外加一個父級標籤,並設定父級標籤隱藏[此處用的是span標籤],如果要顯示的話則去除父級標籤即可。
然而上面這麼多種辦法並沒什麼用
最後解決辦法:
//將select通過clone方法儲存
var select= $("#select").clone();
//刪除所有的option
$("#select").find(`option`).remove();
//查詢出需要顯示的option並複製
var options = select.find("option[value=1]").clone();
//將需要顯示的option新增到select中
$("#select").append(options);
//因為option.remove()不會重新整理控制元件,需要將新的option切換上去
//這裡排除了options.size() == 0的情況
$("#select").find(`option`).eq(0).attr("selected",true);
這樣就好了。