【HTML】セレクトボックスの選択肢を選択できないようにする
Webサイト内のHTMLで作成したセレクトボックスにおいて、特定の選択肢を選択不可状態にする方法を記載していきます。
使用するケース
最も多いケースが、初期状態で「選択してください」という文言用の選択肢を選択できないようにするケースです。
また、商品やサービスを選ぶ選択肢に「準備中」の文言を記載して選択できないようにするパターンもあります。
選択肢をまるごと削除するよりも、利用者の期待感を高める効果があります。
サンプル
方法
選択できないようにしたい選択肢に対応したoptionタグに、
disabled
の属性を指定します。
下記、サンプルで記述したコードとなります。
<form action="">
<dl>
<dt><label for="s1">希望するグッズ</label></dt>
<dd class="sbox1">
<select name="" id="s1">
<option value="" disabled selected>選択してください</option>
<option value="">サッカーボール</option>
<option value="">サイン入り色紙</option>
<option value="">ステッカー</option>
<option value="" disabled>応援歌CD(準備中)</option>
</select>
</dd>
</dl>
</form>disabledの後にイコール以下は特に必要ありません。
また、1つめの選択肢「選択してください」の部分に
selected
の属性を付けることで、初期状態で優先表示されるようになっています。
以上となります。