複数選択できるセレクトボックスは、一覧に表示された項目から複数の選択肢を選べる入力フォームです。選択した項目は色が変わり、現在どの項目が選ばれているのかを確認できます。選択肢が表示領域に収まらない場合は、セレクトボックス内をスクロールして残りの項目を確認できます。
この記事では、操作方法が異なる2種類のセレクトボックスを紹介します。1つ目は標準の複数選択で、WindowsではCtrlキー、MacではCommandキーを押しながらクリックすると、離れた項目を同時に選択できます。Shiftキーを使えば、連続した項目をまとめて選択することも可能です。
2つ目は、キーを押さずにクリックだけで複数選択できるタイプです。項目をクリックすると選択され、もう一度クリックすると選択が解除されます。どちらのタイプも、選択内容が変わるたびに取得した値が下に表示され、複数の項目がどのようにまとめられるのかを確認できます。
デモ
① 標準の複数選択
CtrlキーまたはCommandキーを使って複数選択します。
WindowsではCtrlキー、MacではCommandキーを押しながらクリックすると、離れた項目を複数選択できます。Shiftキーを使った範囲選択も可能です。
選択結果
取得した値：なし
変数：selectedLanguages = [];
データ型：object（配列）
② クリックだけの複数選択
キーを押さずに、クリックだけで選択・解除できます。
項目をクリックすると選択され、もう一度クリックすると解除されます。CtrlキーやCommandキーは必要ありません。タッチ操作にも対応しています。
選択結果
取得した値：なし
変数：selectedLanguages = [];
データ型：object（配列）
①はHTML標準の複数選択で、CtrlキーまたはCommandキーを使って項目を選択します。②はJavaScriptでマウス操作を変更し、キーを押さずに項目を選択・解除できます。どちらも選択した値を配列として取得し、結果を表示します。②のクリック操作はブラウザによって動作が異なる場合があります。
コードをコピーして使おう！
① 標準の複数選択
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>標準の複数選択セレクトボックス</title>
<!-- セレクトボックスのスタイルを読み込む -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- =========================================
複数選択セレクトボックス
multiple属性で複数選択を有効にする
========================================= -->
<div class="multiple-select-box_wrap">
<!-- 入力項目のラベル -->
<label class="multiple-select-box_label" for="multiple-select-box-standard">
プログラミング言語
</label>
<!--
複数選択できるセレクトボックス
multiple：
複数の項目を選択できるようにする。
name="languages[]"：
フォーム送信時に複数の値を扱うための名前。
実際の送信先に合わせて変更できる。
size：
表示する項目数を指定したい場合に追加する。
例：size="5"
現在はCSSのheightで表示領域を調整する。
-->
<select
class="multiple-select-box_select"
id="multiple-select-box-standard"
name="languages[]"
multiple
>
<!-- 選択肢：valueと表示文字は自由に変更できる -->
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="SQL">SQL</option>
<option value="Java">Java</option>
<option value="C#">C#</option>
</select>
</div>
<!-- 選択した値を取得するJavaScript -->
<script src="script.js"></script>
</body>
</html>② クリックだけの複数選択
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>クリックだけの複数選択セレクトボックス</title>
<!-- セレクトボックスのスタイルを読み込む -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- =========================================
クリックだけで複数選択するセレクトボックス
========================================= -->
<div class="multiple-select-box_wrap">
<!-- 入力項目のラベル -->
<label class="multiple-select-box_label" for="multiple-select-box-click">
プログラミング言語
</label>
<!--
複数選択できるセレクトボックス
multiple：
複数選択を有効にする。
JavaScript：
マウスでクリックした項目の選択状態を切り替える。
size：
表示する項目数を指定したい場合に追加する。
例：size="5"
現在はCSSのheightで表示領域を調整する。
-->
<select
class="multiple-select-box_select"
id="multiple-select-box-click"
name="languages[]"
multiple
>
<!-- 選択肢：valueと表示文字は自由に変更できる -->
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="SQL">SQL</option>
<option value="Java">Java</option>
<option value="C#">C#</option>
</select>
</div>
<!-- クリック操作と値の取得を行うJavaScript -->
<script src="script.js"></script>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
今回は、標準の複数選択と、クリックだけで選択・解除できる複数選択の2種類を用意しています。どちらもHTMLのselect要素にmultiple属性を指定し、JavaScriptで選択された値を取得する構成です。2種類のサンプルはそれぞれ独立しており、使用したい方のコードカードから個別にZIPファイルをダウンロードできます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlには、複数選択セレクトボックスとプログラミング言語の選択肢を記述しています。style.cssでは、セレクトボックスの横幅・高さ・枠線・角丸などを設定しています。script.jsでは、選択された項目の値を取得して配列に格納します。②のscript.jsには、マウスでクリックした項目の選択状態を切り替える処理も含まれています。2種類ともファイル構成は同じですが、HTMLのIDとJavaScriptの処理が異なります。
設置方法・使い方
使用したいサンプルの「サンプル一式をダウンロード」をクリックし、ZIPファイルを展開してください。sampleフォルダ内のindex.html・style.css・script.jsを同じ階層に配置した状態で、index.htmlをブラウザで開くと使用できます。①はWindowsではCtrlキー、MacではCommandキーを押しながらクリックすると複数選択でき、Shiftキーを使った範囲選択にも対応しています。②はマウスで項目をクリックするたびに選択・解除を切り替える方式ですが、ブラウザによって動作が異なる場合があります。選択した値はブラウザの開発者ツールにあるコンソールで確認できます。
複数選択を有効にする方法
複数選択は、index.htmlのselect要素に指定したmultiple属性によって有効になります。①と②の両方で使用しており、この属性があることで複数のoption要素を同時に選択できます。
<select
class="multiple-select-box_select"
id="multiple-select-box-standard"
name="languages[]"
multiple
>上記は①のindex.htmlから抜粋したコードです。②ではIDがmultiple-select-box-clickになります。name属性のlanguages[]は、フォーム送信時に複数の値を扱う場合によく使用される名前です。ただし、今回のサンプルにはフォームの送信処理は含まれていません。選択肢を変更したい場合は、index.htmlのoption要素を編集します。value属性にはJavaScriptで取得する値を設定し、option要素の開始タグと終了タグの間には画面に表示する文字を記述します。
選択した値を取得する仕組み
選択された項目の値は、script.jsのselectedOptionsから取得しています。selectedOptionsには現在選択されているoption要素が含まれ、Array.from()で配列に変換したあと、map()で各項目のvalue属性を取り出しています。
/* 選択中のoption要素からvalue属性を取得 */
selectedLanguages = Array.from(
multipleSelectBoxStandard.selectedOptions
).map(function(option) {
return option.value;
});上記は①のscript.jsから抜粋したコードです。②でも同じ方法で取得しますが、対象はmultipleSelectBoxClick.selectedOptionsになります。例えばHTML・CSS・JavaScriptを選択すると、selectedLanguagesには「[“HTML”,”CSS”,”JavaScript”]」という配列が格納されます。選択を解除した項目は、次に値を取得したときに配列から除かれます。
選択内容を取得するタイミング
①ではchangeイベントを使用し、選択内容が変更されたときに値を取得しています。取得した値はconsole.log()でブラウザのコンソールへ出力します。JSON.stringify()は配列の内容を文字列に変換するために使用しています。
/* 選択内容が変更されたときの処理 */
multipleSelectBoxStandard.addEventListener("change", function() {
/* 選択中のoption要素からvalue属性を取得 */
selectedLanguages = Array.from(
multipleSelectBoxStandard.selectedOptions
).map(function(option) {
return option.value;
});
/* 選択された値をコンソールへ表示 */
console.log("取得した値：" + (selectedLanguages.length > 0 ? selectedLanguages.join("、") : "なし"));
/* 配列の内容をコンソールへ表示 */
console.log("selectedLanguages = " + JSON.stringify(selectedLanguages) + ";");
/* データ型をコンソールへ表示 */
console.log("データ型：" + typeof selectedLanguages + "（配列）");
});選択された値は配列として保存されます。JavaScriptでは配列にtypeof演算子を使用すると「object」が返されるため、コンソールにも「object（配列）」と表示されます。今回の配布コードは取得結果を画面内に表示する構成ではなく、コンソールで確認する方式です。
クリックだけで選択・解除する仕組み
②では、script.jsのmousedownイベントを使用してマウス操作を取得しています。クリックされた要素がoptionであることを確認し、preventDefault()で標準の選択動作を停止したあと、selectedプロパティを切り替えています。
/* マウスで押した項目の選択状態を切り替える */
multipleSelectBoxClick.addEventListener("mousedown", function(event) {
/* option要素以外では標準動作を変更しない */
if (event.target.tagName !== "OPTION") {
return;
}
/* 通常の選択動作を停止 */
event.preventDefault();
/* クリックした項目の選択状態を反転 */
event.target.selected = !event.target.selected;
/* 変更後の選択値を取得 */
updateMultipleSelectBoxClick();
});event.target.selectedがfalseならtrueに、trueならfalseに切り替えることで、同じ項目をクリックして選択・解除できる仕組みです。切り替え後はupdateMultipleSelectBoxClick()を呼び出し、現在選択されている値を取得します。また、changeイベントでも同じ関数を実行しています。ただし、option要素に対するmousedownイベントの動作はブラウザや端末によって異なり、スマートフォンのタッチ操作を含め、すべての環境で同じ操作を保証するものではありません。
スクロールと表示領域の高さを調整する方法
選択肢が表示領域に収まらない場合は、セレクトボックス内をスクロールして残りの項目を確認できます。今回のサンプルでは、style.cssのmultiple-select-box_selectクラスにheight: 220px;を指定して表示領域の高さを設定しています。
/* 複数選択セレクトボックス本体 */
.multiple-select-box_select {
display: block;
width: 100%;
height: 220px; /* 表示領域の高さ。大きくすると表示できる項目が増える */
padding: 10px; /* 選択欄の内側の余白 */
border: 2px solid #dbe5f1; /* 枠線の太さと色 */
border-radius: 12px; /* 角丸。大きくすると丸みが強くなる */
background: #ffffff;
color: #111827;
font-size: 16px; /* 選択肢の文字サイズ */
line-height: 1.5;
box-sizing: border-box;
cursor: pointer;
}heightの数値を大きくすると表示領域が縦に広がり、一度に確認できる選択肢が増えます。小さくすると表示領域が狭くなり、スクロールして確認する項目が増えます。また、width: 100%;とmax-width: 680px;で横幅を設定しています。最大横幅を変更したい場合はmax-widthの数値を調整してください。選択欄の内側の余白はpadding、角丸の大きさはborder-radiusで変更できます。
表示する項目数を指定する方法
セレクトボックスの表示領域は、CSSのheightだけでなく、HTMLのsize属性でも指定できます。例えばindex.htmlのselect要素にsize=”5″を追加すると、5項目分を表示する指定になります。表示範囲を超えた選択肢は、スクロールして確認できます。
<!--
size：
表示する項目数を指定したい場合に追加する。
例：size="5"
現在はCSSのheightで表示領域を調整する。
-->上記はindex.htmlに記載しているコメントです。現在の配布コードではsize属性を指定せず、CSSのheightで高さを調整しています。size属性で表示件数を調整したい場合は、CSSのheightも合わせて見直してください。なお、multiple属性を削除してsize属性だけを指定すると、スクロールできる単一選択のセレクトボックスとして使用できます。ただし、その場合は今回の複数選択用JavaScriptも用途に合わせた変更が必要です。
レスポンシブ対応
style.cssでは、セレクトボックスの横幅をwidth: 100%;、最大横幅をmax-width: 680px;に設定しています。画面幅が狭くなると、親要素の幅に合わせて縮小します。また、画面幅640px以下ではメディアクエリを使用し、選択欄の高さを220pxから200pxへ変更しています。
/* 画面幅640px以下で表示領域を調整 */
@media screen and (max-width: 640px) {
/* スマートフォン用の高さ */
.multiple-select-box_select {
height: 200px; /* スマートフォンで表示する選択欄の高さ */
}
}スマートフォンで一度に表示する項目を増やしたい場合は、メディアクエリ内のheight: 200px;を大きくします。反対に、画面内で選択欄が占める高さを抑えたい場合は数値を小さくしてください。なお、このメディアクエリは表示領域の高さを調整するものであり、②のクリック操作をタッチ操作向けに変更するものではありません。
コメント