selectタグ内で区切り線にhrが使用可能になりました

selectタグ内で区切り線にhrが使用可能に

Chrome 119からセレクトボックスで区切り線にhrタグが使用可能になりました。

Safari, Microsoft Edgeでも使用可能です。

ただし、Firefoxおよびスマホとタブレットのブラウザでは現在使用不可です。

使い方は例えば以下のようにoptionタグの間にhrタグを挿入するだけで区切り線が追加されます。

<select>
  <option value="" selected>都道府県を選択して下さい</option>
  <hr>
  <option value="北海道">北海道</option>
  <hr>
  <option value="青森県">青森県</option>
  <option value="岩手県">岩手県</option>
  <option value="宮城県">宮城県</option>
  <option value="秋田県">秋田県</option>
  <option value="山形県">山形県</option>
  <option value="福島県">福島県</option>
  <hr>
  <option value="茨城県">茨城県</option>
  <option value="栃木県">栃木県</option>
  <option value="群馬県">群馬県</option>
  <option value="埼玉県">埼玉県</option>
  <option value="千葉県">千葉県</option>
  <option value="東京都">東京都</option>
  <option value="神奈川県">神奈川県</option>
  <hr>
  <option value="新潟県">新潟県</option>
  <option value="富山県">富山県</option>
  <option value="石川県">石川県</option>
  <option value="福井県">福井県</option>
  <option value="山梨県">山梨県</option>
  <option value="長野県">長野県</option>
  <option value="岐阜県">岐阜県</option>
  <option value="静岡県">静岡県</option>
  <option value="愛知県">愛知県</option>
  <hr>
  <option value="三重県">三重県</option>
  <option value="滋賀県">滋賀県</option>
  <option value="京都府">京都府</option>
  <option value="大阪府">大阪府</option>
  <option value="兵庫県">兵庫県</option>
  <option value="奈良県">奈良県</option>
  <option value="和歌山県">和歌山県</option>
  <hr>
  <option value="鳥取県">鳥取県</option>
  <option value="島根県">島根県</option>
  <option value="岡山県">岡山県</option>
  <option value="広島県">広島県</option>
  <option value="山口県">山口県</option>
  <hr>
  <option value="徳島県">徳島県</option>
  <option value="香川県">香川県</option>
  <option value="愛媛県">愛媛県</option>
  <option value="高知県">高知県</option>
  <hr>
  <option value="福岡県">福岡県</option>
  <option value="佐賀県">佐賀県</option>
  <option value="長崎県">長崎県</option>
  <option value="熊本県">熊本県</option>
  <option value="大分県">大分県</option>
  <option value="宮崎県">宮崎県</option>
  <option value="鹿児島県">鹿児島県</option>
  <hr>
  <option value="沖縄県">沖縄県</option>
</select>

JavaScriptでhrを自動挿入する方法

以下のようなアルファベット順などのHTMLでサーバーから動的に返されて内容が変わる場合などはJavaScriptでhrタグを挿入すると実装が簡単です。

<select>
  <option value="" selected>選択して下さい</option>
  <hr>
  <option value="air">air</option>
  <option value="apple">apple</option>
  <option value="banana">banana</option>
  <option value="bas">bas</option>
  <option value="cookie">cookie</option>
  <option value="cream">cream</option>
</select>

上記のHTMLの場合は下記のJavaScriptでアルファベットの頭文字が変更後の前の箇所にhrタグが挿入されます。

const selectElement = document.querySelector('select')
let lastChar

selectElement.querySelectorAll('option').forEach((option, index) => {
  const firstChar = option.textContent.trim().charAt(0).toLowerCase()

  if (firstChar !== lastChar && index !== 0) {
    const hr = document.createElement('hr')
    selectElement.insertBefore(hr, option)
  }
  lastChar = firstChar
})

JavaScriptの実行後は以下のHTMLになります。

<select>
  <option value="" selected>選択して下さい</option>
  <hr>
  <option value="air">air</option>
  <option value="apple">apple</option>
  <hr>
  <option value="banana">banana</option>
  <option value="bas">bas</option>
  <hr>
  <option value="cookie">cookie</option>
  <option value="cream">cream</option>
</select>

選択項目が多い国の選択肢などに使うと効果的です。

hrで区切らないほうが良い場合もある

選択項目が少ないものや、西暦などの連番のセレクトボックスでhrタグの区切りを使用すると、逆に見づらくなってしまうので、使用は避けたほうが良いです。