1. ホーム
  2. html

[解決済み] デフォルトで空白を選択

2022-02-12 10:10:04

質問

HTMLのドロップダウンメニューで、デフォルトで選択されているオプションがないことが要求される、非常に奇妙な要件があります。しかし

これは使えません。

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

なぜなら、このために私は最初のオプションを処理するためにバリデーションを行う必要があるからです。実際に最初の選択肢をselectタグの一部として含めずにこの目標を達成するために、どなたか助けていただけませんか?

解決方法は?

たぶん、これが役に立つでしょう

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