web-dev-qa-db-ja.com

ドロップダウンをクリックしたときにデフォルトの<select> <option>を非表示にするにはどうすればよいですか？

<select>デフォルトで選択されるオプションの要素は「____」です。他の単語では、空白です。

ドロップダウンがフォーカスされている場合、選択可能なオプションに「____」オプションを含めないようにします。その方法では、ユーザーはオプションとして「____」以外のものを選択する必要があります。

それは理にかなっていますか？

イラスト

閉まっている：

Closed select menu

開いた：

Opened select menu

ご覧のように、オプション「___」は選択されているときはリストにありません。それが私の最終結果です。

onFocusイベントを使用してオプションを削除しようとしましたが、それは要素のフォーカスを外し、デフォルトのオプションを別のオプションに置き換えます。

javascriptjqueryhtmlcsshtml-select
12
Drazzah

デフォルトのオプションを非表示にして、他のオプションを表示するには、いくつかの方法があります。

残念ながら、すべてのブラウザでオプション要素を非表示にすることはできません。繰り返しますが、display:none;がoptionsのすべてのブラウザで機能しない...

過去にこれを行う必要があったときに、無効属性を次のように設定しました...

$('option').prop('disabled', true);

次に、このCSSを使用するブラウザーでサポートされている非表示を使用しました...

select option[disabled] {
    display: none;
}
10
rfornal

HTMLのhidden属性を利用できます。この例で試してください

<select>
    <option selected disabled hidden>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

これをチェックしてください fiddle または以下のスクリーンショット。

クリックする前に： before clicking

クリック後： enter image description here

15
Nobita

[〜＃〜] css [〜＃〜]はあなたの友達です。非表示にするオプションにdisplay:noneを設定します。

<select>
<option style="display:none" selected="selected" value=""> </option>
<option value="visi1">Visible1</option>
<option value="visi2">Visible2</option>
<option value="visi3">Visible3</option>
</select>

以下は、選択の最初のオプションが確実に非表示になるようにするjQueryの追加です。

$('select:first-child').css({display:none;});
4
Collector