select で初期値を追加する方法

select（セレクトボックス） で値を持たない初期値を追加する方法を紹介します。
例えば、初期値を「選択してください」などにする時に便利な方法です。

1. option に selected と disabled を指定する方法
2. option に hidden を指定する方法

option に selected と disabled を指定する方法

セレクトボックスの最初に、値を持たない「選択してください」を追加する場合は、以下のコードを追加してください。

<select name="select">

  <option selected disabled>選択してください</option>

  <option value="項目1">項目1</option>

  <option value="項目2">項目2</option>

  <option value="項目3">項目3</option>

</select>

最初の項目、「選択してください」には値が必要ないので value は削除します。
option に selected が付与されていると、その項目が選択状態になります。
さらに option に disabled が付与されると、その項目が無効化され選択できなくなります。

option に hidden を指定する方法

<select name="select">

  <option hidden>選択してください</option>

  <option value="項目1">項目1</option>

  <option value="項目2">項目2</option>

  <option value="項目3">項目3</option>

</select>

option に hidden が付与されていると、プルダウン選択時にその項目が無くなります。
一度でも select を触ると、それ以降の操作では hidden が付与された要素は表示されなくなります。

まとめ

select で値を持たない初期値を追加する方法を紹介しました。
おすすめとして「option に selected と disabled を指定する方法」が、選択後も「選択してください」の表記が残るため、よい方法なのではと考えています。