Ctrlキー不要！複数選択できるselectタグをJavaScriptで実現する方法

Webフォームで複数選択を行う際、<select multiple> タグを使うのが一般的です。
しかし、この標準の挙動では、ユーザーが Ctrl（またはCommand）キーや
Shiftキーを押しながら選択 しなければなりません。
PCに不慣れなユーザーや、タッチ操作の多いUIにおいては、この操作が分かりづらく感じられることも。

本記事では、「キー操作なし」で複数選択できる select タグの実装方法について、
JavaScriptを活用した実用的な解決策をご紹介します。

通常の<select multiple>の制限

HTMLで複数選択が可能なselectボックスは以下のように記述します。

<select multiple name="fruits[]" size="5">
  <option value="apple">りんご</option>
  <option value="banana">バナナ</option>
  <option value="grape">ぶどう</option>
  <option value="orange">オレンジ</option>
  <option value="melon">メロン</option>
</select>

この方法では、Windowsでは Ctrlキー、Macでは Commandキー を押しながら
クリックする必要があります。
キー操作に不慣れなユーザーにとっては、これがハードルになることも。

解決策：マウスクリックだけで選択できるselectを作る

以下のようにJavaScriptを使えば、「クリックだけで選択・解除」を実現できます。
選択中の項目を再クリックすれば解除され、チェックボックス感覚で使えるselectボックスが完成します。

コード例

<select id="customSelect" multiple size="5">
  <option value="apple">りんご</option>
  <option value="banana">バナナ</option>
  <option value="grape">ぶどう</option>
  <option value="orange">オレンジ</option>
  <option value="melon">メロン</option>
</select>

<script>
document.getElementById('customSelect').addEventListener('mousedown', function(e) {
  e.preventDefault(); // 標準の選択動作を無効化
  const option = e.target;
  if (option.tagName.toLowerCase() === 'option') {
    option.selected = !option.selected; // 選択状態をトグル
  }
});
</script>

スマホ対応について

このJavaScriptによる実装は、デスクトップ環境での操作性を改善するものです。
モバイル端末（iOSやAndroid）では、ブラウザや端末仕様により
<select> の表示がOSネイティブに強制されるため、意図したカスタマイズが効かないことがあります。

そのため、スマホユーザーを含めたフォーム設計を行いたい場合は、
以下のようなチェックボックスの方が確実です。

代替案：チェックボックスで複数選択を実装

<label><input type="checkbox" name="fruits[]" value="apple"> りんご</label><br>
<label><input type="checkbox" name="fruits[]" value="banana"> バナナ</label><br>
<label><input type="checkbox" name="fruits[]" value="grape"> ぶどう</label><br>
<label><input type="checkbox" name="fruits[]" value="orange"> オレンジ</label><br>

この形式であれば、選択の意図が明確で、PC・スマホ両方で扱いやすいUIになります。

まとめ

方法	特徴	モバイル対応
<select multiple>（通常）	標準機能だがCtrl操作が必要	△
JavaScriptでトグル式select	直感的だがデスクトップ向け	△（端末により制限）
チェックボックス形式	わかりやすく、柔軟なデザインが可能	◎

ユーザーにやさしいUIを設計するためには、見た目の選択だけでなく「操作性」も重要です。
用途やユーザー層に応じて、select＋JavaScriptか、チェックボックスをうまく選び分けてみてください。

Favorite