<select>
<option>test1</option>
<option>test2</option>
</select>
のtest1を非表示にしたいのですが、javascript 、jqueryで可能でしょうか?
firefoxでは、cssのdisplay:noneで非表示になりますが、IEでは実現できませんでした。
IEのドキュメントoption elementには
Except for
background-color
andcolor
, style settings applied through thestyle
object for theoption
element are ignored. In addition, style settings applied directly to individualoptions
override those applied to the containingselect
element as a whole.
とありスタイルを指定できない仕様のようです。
非表示にするという意味ではdisplay:none
をセットするというのが正しい処置だと思います。
なので、IEは動作がおかしいように思います。
そうは言っても仕方ないので、
IEでの処理を振り分けてDOM要素を削除してしまうしかないのかなと思います。(再び表示する場合は要素を差し込む必要がある)
削除自体はjQueryのremove
メソッドで$("option:first").remove();
(なんならIDを付けてID指定でセレクト)でできると思います。
HTML文書自体を変更してoptionを1つ削除したりはしたくないので
一時的にCSSを変更してCSSのスタイルで非表示にしたかった。
というようなことなら、HTMLの一部を削除するのではなくコメントアウトすることで無くすることができます。
<!--
と-->
で該当部分を囲む。
例:
<!-- <option>test1</option> -->
一応、hidden
属性を指定する事で消せるようです。
ただ下の様にselected
で選択状態にしておくとユーザが操作するまで表示されていたりと、あまりスマートではありません。
<option selected hidden>test2</option>
また、この属性は古いブラウザではサポートされないでしょう。