デフォルトの選択オプションは空白

458

非常に奇妙な要件があります。HTMLのドロップダウンメニューで、デフォルトでオプションを選択する必要はありません。しかしながら、

これは使えません

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
スニペットを展開

これは、最初のオプションを処理するために検証を行う必要があるためです。選択タグの一部として最初のオプションを実際に含めることなく、この目標を達成するのを手伝ってくれる人はいますか？

html 
— パンカジパラシャー
ソース
2
私の知る限り、これが空白行を取得する唯一の方法です。検証を行う必要があるとはどういう意味ですか？チェックを設定して、value = ""の場合はfalseを返します。
— ロバート
1
これは、ドロップダウンの代わりにラジオボタンを使用する良い機会です。
— Blazemonger、2015年
9
私の意見では、奇妙な要件ではありません。私は同じ船に乗っています。「オプションなし」のデフォルトも必要です。フォームの送信に必要のないドロップダウンがいくつかあります。この方法でそれらを無効にすると、ユーザーが適切でないときに選択を行う必要がなくなります。良い質問！+1
— スコット
SELECTが持っていない場合は奇妙な要件は、プレースホルダのラベルオプションを持つ必要な属性は、HTML5の要件ですdev.w3.org/html5/spec-preview/...
— テストーTestini
@Blazemongerラジオボタンは、3つまたは4つ以上ある場合はひどい考えです。15以上のオプション、または50以上のドロップダウンリストを想像してみてください。多くの場合、これらには独自の設計上の問題がありますが、この問題は、ラジオボタンがまったく適切にスケーリングされないことを示しています。
— TylerH

回答:

1014

多分これは役に立つでしょう

<select>
    <option disabled selected value> -- select an option -- </option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

-- select an option --デフォルトで表示されます。ただし、オプションを選択した場合、元に戻すことはできません。

空を追加して非表示にすることもできます option

<option style="display:none">

そのため、リストに表示されなくなります。

オプション2

CSSを記述せず、上記のソリューションと同じ動作を期待する場合は、次のように使用します。

<option hidden disabled selected value> -- select an option -- </option>

— ガンビット
ソース
15
— Uwe Keim 2016年
26
@azerafatiが@Rafael_Moriが指摘したように、 "hidden"属性を使用して同じものをアーカイブできるため、CSSは必要ありません。純粋なHTML5;）<option hidden disabled selected value> -- select an option -- </option>
— BrainOverflow
選択できるようにしたい場合はどうすればよいですか？何も送信しないでください。出来ますか？
— Michael Rogers
1
オプション要素に隠し属性を追加することは私にとって魔法です！こんなに簡単だとは思っていませんでした。ありがとう
— S. Domeng
注意して、両方の隠された属性の表示スタイルは、IEでさえ11の仕事をしませんstackoverflow.com/questions/58862242/...
— yatskovsky
113

JavaScriptを使用してこれを実現できます。次のコードを試してください：

HTML

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select>

JS

document.getElementById("myDropdown").selectedIndex = -1;

またはjQuery

$("#myDropdown").prop("selectedIndex", -1);
— マッチー
ソース
このソリューションはChrome 35で部分的に機能します。オプションのリストが非表示の場合、ドロップダウンには選択が表示されませんが、オプションのリストが表示されると、最初に選択されたオプションが表示されます。Safari 7は意図したとおりに動作します。
— flochtililoch 14
興味深いのは、これがHTMLフォーム検証で機能することです。要素のrequired属性を使用しselect、オプションを選択せず​​に送信すると、フォームの検証が失敗して通知される場合は、選択を行う必要があります。したがって、私はこのアプローチが本当に好きです。（少なくともChromeでテスト済み）
— Andreas Linnert 2017
動作しません（少なくとも現在のブラウザでは、この記事の執筆時点で-不必要にjavascriptに依存しています。）
— silentmouth
1
2019年の時点で、これでボールをプレーすることを拒否するのはSafari IOS 10だけです
— Ayyash
36

今日（2015-02-25）

これは有効なHTML5であり、サーバーに空白（スペースではない）を送信します。

<option label=" "></option>

http://validator.w3.org/checkで検証された有効性

Win7（IE11 IE10 IE9 IE8 FF35 Safari5.1）Ubuntu14.10（Chrome40、FF35）OSX_Yosemite（Safari8、Chrome40）Android（Samsung-Galaxy-S5）での動作の確認

以下も本日検証を通過しますが、ほとんどのブラウザーからサーバーにある種のスペース文字（おそらく望ましくない）を渡し、他のブラウザーでは空白を渡します（Chrome40 / Linuxは空白を渡します）。

<option>&#160;</option>

以前（2013-08-02）

私のメモによると、上記のオプションタグ内の非改行スペースエンティティは2013年に次のエラーを生成しました。

エラー：W3Cマークアップ検証サービス（パブリック）：必須属性があり、複数の属性がない、select要素の最初の子option要素。

当時、通常のスペースは有効なXHTML4であり、すべてのブラウザーからサーバーに（スペースではなく）空白を送信していました。

<option> </option>

未来

空白のオプションを明示的に許可するように仕様が更新されたとしたら、私の心はうれしいでしょう。できれば、最も簡単な構文を使用します。次のいずれかが素晴らしいでしょう：

<option />
<option></option>

テストファイル

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
</head>
<body>
  <form action="index.html" method="post">
    <select name="sel">
      <option label=" "></option>
    </select>
  </form>
</body>
</html>
— グレンピーターソン
ソース
15 

<td><b>Ação da atividade:</b><br>
	<select style='align:left; width:100%;' id='cbxTipoSFA' name='cbxTipoSFA'>
	<option hidden selected>Selecione uma opção</option>
	<option value='Instalação'>Instalação</option>
	<option value='Solicitação'>Solicitação</option>
	<option value='Retirada'>Retirada</option></select>
</td>
スニペットを展開

ドロップダウンリストで非表示にするオプションに「非表示」を置くだけです。

— ラファエル・モリ
ソース
8

CSSのみを使用して機能するソリューション：

A：インラインCSS

<select>
    <option style="display:none;"></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>
スニペットを展開

B：CSSスタイルシート

手元にCSSファイルがある場合は、次optionを使用して最初のファイルをターゲットにできます。

select.first-opt-hidden option:first-of-type {
  display:none;
}
<select class="first-opt-hidden">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>
スニペットを展開

— カイ・ノアック
ソース
4

これは役立つはずです：

https://www.w3schools.com/tags/att_select_required.asp

 <form>
 <select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="submit">Submit</button>
</form>
スニペットを展開

— ロハンパラブ
ソース
これは、この要件を達成する最も最新の（html5）方法です。これにはtype = submitボタンが必要であることに注意してください。onclickサブミットハンドラーを備えたtype = buttonでは、ユーザーが自動的に選択する必要はありません。
— アルジャン
3 
<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

この場合、カスタム検証を回避できます。

— ファワズ
ソース
2

ほんの少しの発言：

一部のSafariブラウザーは、「hidden」属性もスタイル設定「display：none」も考慮していないようです（MacOS 10.12.6でSafari 12.1を使用してテスト済み）。明示的なプレースホルダーテキストがない場合、これらのブラウザーはオプションのリストの最初の行を空にするだけです。したがって、この「ダミー」エントリの説明テキストを常に提供しておくと便利です。

<option hidden disabled selected value>(select an option)</option>

「無効」属性のおかげで、それはとにかく積極的に選択されません。

— アンドレアス・ロゼック
ソース
1

私はあなたが何をしようとしているのか理解しています。最善かつ最も成功した方法は次のとおりです。

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>
— グリャシ・シン
ソース
1

同じことを少し前に経験したばかりなので、本当に面白いと思いました。しかし、私はこれに関する解決策についてインターネット上の例に出くわしました。

次のコードフラグメントを参照してください。

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 3</option>
</select>

これにより、いつでも送信できなくなりますが、選択できます。ユーザーインターフェイスの利便性とユーザーエクスペリエンスの向上。

まあそれだけです、それが役に立てば幸いです。乾杯！

— farisfath25
ソース
送信できないようにするだけでなく、ユーザーにドロップダウンに注意を
— 向けさせる
@lofacture：入力いただきありがとうございます。実際、私が書いたコードは私が欲しかったものですが、はい、あなたが言ったように、それはユーザー/所有者のニーズに依存します
— farisfath25
0

HTMLソリューションはありません。HTML 4.01仕様では、option要素にselected属性がない場合のブラウザの動作は定義されていません。実際のブラウザでは、最初のオプションが事前に選択されています。

回避策として、要素を（同じ属性を持つ）要素のselectセットで置き換えることができます。これにより、外観とユーザーインターフェイスが異なるものの、同じ種類のコントロールが作成されます。どの要素も属性を持たない場合、ほとんどの最新のブラウザーでは最初に選択されません。input type=radionameinput type=radiochecked

— ユッカ・K・コルペラ
ソース
0

私はLaravel 5フレームワークを使用しており、@ Gambiの回答もうまくいきましたが、プロジェクトにいくつかの変更が加えられています。

データベーステーブルにオプション値があり、それらをforeachステートメントで使用しています。しかし、ステートメントの前に、@ Gambit推奨設定のオプションを追加しましたが、それは機能しました。

ここに私の例：

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset

これが誰かにも役立つことを願っています。今後ともよろしくお願いいたします。

— ログOracle
ソース
0

これを試して：

<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>

ドロップダウンの最初のオプションは空白になります。

— アビジットパイ
ソース
0

表示するには、ドロップダウンで値を選択してください後に非表示にして。以下のコードを使用してください。

また、必要な検証もサポートします。

<select class="form-control" required>
<option disabled selected value style="display:none;">--Please select a value</option>
              <option >Data 1</option>
              <option >Data 2</option>
              <option >Data 3</option>
</select>
スニペットを展開

— バトリ・ネイサン
ソース
0

Angular（2+）（またはその他のフレームワーク）を使用している場合は、ロジックを追加できます。ロジックは、ユーザーが他のオプションをまだ選択していない場合にのみ、空のオプションを表示します。したがって、ユーザーがオプションを選択すると、空のオプションは消えます。

Angular（9）の場合、これは次のようになります。

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>
— マイク・ド・クラーク
ソース
-2

これを試して：

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

HTML5で検証します。で動作しますrequiredselect要素内の属性。再選択できます。Google Chrome 45、Internet Explorer 11、Edge、Firefox 41で動作します。

— トリスタン・ベイリー
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.