【HTML】セレクトボックスの選択肢を選択できないようにする

2020-04-08

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
の属性を付けることで、初期状態で優先表示されるようになっています。

以上となります。