複数選択できるセレクトボックスを作る方法
複数選択できるセレクトボックスを作る方法を紹介します。通常のセレクトボックスは1つの項目だけを選択しますが、HTMLのmultiple属性を使用すると、複数の選択肢を同時に選べるリスト形式のセレクトボックスを作成できます。このサンプルでは、選択した項目をJavaScriptで取得し、セレクトボックスの下へ一覧表示します。
フォーム送信時に複数の値をまとめて扱えるよう、セレクトボックスのname属性には「languages[]」を設定します。末尾に角括弧を付けることで、選択された複数の値を配列形式として送信できます。お問い合わせ画面、アンケートフォーム、会員サイトのプロフィール設定、管理画面のカテゴリー設定など、複数回答を受け付けたい場面で利用できます。
PCではCtrlキー（Windows）またはCommandキー（Mac）を押しながら項目をクリックすると、離れた項目を複数選択できます。連続した範囲を選択する場合はShiftキーも利用できます。スマートフォンやタブレットでは端末ごとの選択画面から操作できます。選択肢、表示する文章、色、サイズ、選択結果の文言は、用途に合わせて変更できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
複数の項目を選択すると、選択結果が下に表示されます。
PCではCtrlキー（Windows）またはCommandキー（Mac）を押しながらクリックすると、複数の項目を選択できます。
複数の項目を選択すると、現在選択されている言語がセレクトボックスの下へ表示されます。name属性には「languages[]」を設定しています。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8へ設定 -->
<meta charset="UTF-8">
<!-- スマートフォンやタブレットの画面幅へ対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ブラウザのタブへ表示するページタイトル -->
<title>複数選択できるセレクトボックス</title>
<!-- セレクトボックスのデザインを設定するCSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 複数選択できるセレクトボックス全体 -->
<div class="multiple-select-box">
<!-- セレクトボックスエリアのタイトル -->
<div class="multiple-select-box_title">
利用する言語を選択
</div>
<!-- 複数選択と結果表示について案内する説明文 -->
<p class="multiple-select-box_text">
複数の項目を選択すると、選択結果が下に表示されます。
</p>
<!-- セレクトボックスのラベル -->
<label class="multiple-select-box_label" for="language">
プログラミング言語
</label>
<!-- 複数のプログラミング言語を選択するセレクトボックス -->
<select
class="multiple-select-box_select"
id="language"
name="languages[]"
multiple>
<!-- HTMLの選択肢 -->
<option value="HTML">
HTML
</option>
<!-- CSSの選択肢 -->
<option value="CSS">
CSS
</option>
<!-- JavaScriptの選択肢 -->
<option value="JavaScript">
JavaScript
</option>
<!-- PHPの選択肢 -->
<option value="PHP">
PHP
</option>
<!-- Pythonの選択肢 -->
<option value="Python">
Python
</option>
<!-- SQLの選択肢 -->
<option value="SQL">
SQL
</option>
<!-- Javaの選択肢 -->
<option value="Java">
Java
</option>
<!-- C#の選択肢 -->
<option value="C#">
C#
</option>
</select>
<!-- PCで複数選択する操作方法 -->
<p class="multiple-select-box_operation">
PCではCtrlキー（Windows）またはCommandキー（Mac）を押しながらクリックすると、複数の項目を選択できます。
</p>
<!-- 現在選択されている項目の表示エリア -->
<div
class="multiple-select-box_result"
id="multiple-select-box-result"
aria-live="polite">
選択中：なし
</div>
</div>
<!-- 選択結果を表示するJavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで複数選択できるセレクトボックスを配置し、CSSでレイアウトや見た目を整え、JavaScriptで選択された項目を取得して画面へ表示します。フォーム送信時に複数の値を扱えるよう、セレクトボックスのname属性は「languages[]」の配列形式で設定しています。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html
セレクトボックスや選択肢、選択結果の表示エリアを配置します。選択肢の追加・削除や、name属性、表示する文章を変更できます。
style.css
セレクトボックス全体のレイアウト、余白、文字サイズ、背景色、枠線、角丸などの見た目を設定します。
script.js
セレクトボックスで選択された項目を取得し、選択結果を画面へ表示します。選択結果の表示方法や表示文言を変更できます。
設置方法・使い方
sampleフォルダ内の index.html をブラウザで開くと利用できます。PCではCtrlキー（Windows）またはCommandキー（Mac）を押しながらクリックすると複数選択できます。選択内容はJavaScriptで取得され、画面下へ一覧表示されます。
カスタマイズできる内容
index.htmlでは選択肢の追加・削除、表示する項目名、name属性「languages[]」、タイトルや説明文を変更できます。style.cssでは色、文字サイズ、余白、枠線、角丸、高さなどのデザインを変更できます。script.jsでは選択結果の表示形式や文言、区切り文字などを自由に変更できます。
数値調整
style.css
max-width:700px;
700pxは全体の最大横幅です。値を大きくすると表示領域が広がります。
style.css
height:220px;
220pxはセレクトボックスの高さです。値を大きくすると一度に表示できる項目数が増えます。
style.css
padding:36px;
36pxは全体の内側余白です。値を大きくすると内容との間隔が広がります。
style.css
font-size:30px;
30pxはタイトルの文字サイズです。値を変更するとタイトルの大きさが変わります。
style.css
font-size:16px;
16pxは説明文や選択肢、選択結果などの文字サイズです。値を変更すると文字の大きさが変わります。
style.css
border-radius:18px;
18pxは全体カードの角丸です。値を大きくすると丸みが強くなります。
style.css
border-radius:12px;
12pxはセレクトボックスの角丸です。値を変更すると丸みが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでwidth:100%、max-width、padding、height、およびmedia queryを使用しているため、スマートフォン・タブレット・PCでもレイアウトが崩れにくく利用できます。
コメント