1
<select>
 <option>test1</option>
 <option>test2</option>
</select>

のtest1を非表示にしたいのですが、javascript 、jqueryで可能でしょうか?
firefoxでは、cssのdisplay:noneで非表示になりますが、IEでは実現できませんでした。

3 件の回答 3

2

IEのドキュメントoption elementには

Except for background-color and color, style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing select element as a whole.

とありスタイルを指定できない仕様のようです。

0

非表示にするという意味ではdisplay:none をセットするというのが正しい処置だと思います。
なので、IEは動作がおかしいように思います。
そうは言っても仕方ないので、
IEでの処理を振り分けてDOM要素を削除してしまうしかないのかなと思います。(再び表示する場合は要素を差し込む必要がある)
削除自体はjQueryのremoveメソッドで$("option:first").remove(); (なんならIDを付けてID指定でセレクト)でできると思います。

HTML文書自体を変更してoptionを1つ削除したりはしたくないので
一時的にCSSを変更してCSSのスタイルで非表示にしたかった。
というようなことなら、HTMLの一部を削除するのではなくコメントアウトすることで無くすることができます。
<!---->で該当部分を囲む。
例:

<!-- <option>test1</option> -->
0

一応、hidden属性を指定する事で消せるようです。
ただ下の様にselectedで選択状態にしておくとユーザが操作するまで表示されていたりと、あまりスマートではありません。

<option selected hidden>test2</option>

また、この属性は古いブラウザではサポートされないでしょう。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。