ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLの選択オプションを非表示にできない問題を完全に解決します。

HTMLの選択オプションを非表示にできない問題を完全に解決します。

高洛峰
高洛峰オリジナル
2017-02-15 14:07:557011ブラウズ

開発プロセス中に偶然この問題に遭遇しました。この問題を最初に解決したのは Baidu でした。結果:この解決策は、オプションを選択不能にするだけで、非表示にすることはできません。オプションを非表示にしたい場合は、DOM ツリーからオプションを削除し、削除したオプションをキャッシュして、再度表示する必要があります。オプションをキャッシュから取り出して DOM ツリーに追加することは、明らかに要件を満たしていません。

c. 究極の解決策 (すべてのブラウザと互換性があることがテスト済み): 親タグをオプションに追加し、親タグを非表示に設定します (表示したい場合は、単に削除します)。親タグ。



しかし、上記の方法はすべて役に立ちません


最終的な解決策:

//将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の選択オプションを非表示にできない問題に対するより完璧な解決策。関連記事については、PHP 中国語 Web サイトに注目してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。