16623

[code]

    <select>
     <option>test1</option>
     <option>test2</option>
    </select>
    
[/code]

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


CC BY-SA 3.0
2015-09-15T01:19:57.047
16612
2017-06-15T02:01:18.283
12327
question
javascript jquery html
セレクトボックス内の要素を非表示にしたい


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

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

[code]

    <!-- <option>test1</option> -->
    
[/code]


CC BY-SA 3.0
2015-09-15T05:37:44.713
16622
2015-09-15T05:48:53.713
2015-09-15T05:48:53.713
5044
5044
16612
answer


IEのドキュメント[option element](https://msdn.microsoft.com/en-
us/library/ms535877\(v=vs.85\).aspx)には

> 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.

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


CC BY-SA 3.0
2015-09-15T05:51:27.593
16623
2015-09-15T05:51:27.593
4236
16612
answer


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

[code]

    <option selected hidden>test2</option>
    
[/code]

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


CC BY-SA 3.0
2015-09-15T06:56:03.027
16624
2015-09-15T06:56:03.027
3054
16612
answer