首頁 > web前端 > html教學 > 完美解決html中select的option不能隱藏的問題。

完美解決html中select的option不能隱藏的問題。

高洛峰
發布: 2017-02-15 14:07:55
原創
7199 人瀏覽過

開發過程中無意遇到這個問題,解決問題第一時間就是百度。結果得到如下方法:

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);
登入後複製

這樣就好了。

更多完美解決html中select的option不能隱藏的問題。 相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板