サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

jQuery: プラグインSelect2で<select>要素のドロップダウンリストを操作する


Select2はjQueryのプラグインで、<select>要素のドロップダウンリストにさまざまな表現や機能が加えられます。簡単な作例で、設定と操作の仕方についてご説明します。

01 <select>要素の標準のドロップダウンリスト

まずは、<select>要素で標準のドロップダウンリストをつくってみましょう。つぎのようにid属性(demo)が与えられた要素に、<option>要素でリスト項目を加えます。空の<span>要素(id属性selectedId)には、あとでスクリプトにより選択項目の番号を加えるつもりです。


<p>Selected: <span id="selectedId"></span></p>
<select id="demo">
	<option value="0">Vue.js</option>
	<option value="1" selected>React.js</option>
	<option value="2">Angular</option>
</select>

これでHTMLドキュメントには標準のドロップダウンリストが表示されます(図001)。selected属性を与えた<option>要素がはじめに選ばれているはずです。

図001■標準のドロップダウンリスト

図001

このあとプラグインを使いますので、jQueryは読み込んでおきましょう。ここではCDNを利用することにします。


<script src="https://code.jquery.com/jquery-3.3.1.min.js"
	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

リストから選んだ項目の値(value属性)を、JavaScriptコードでページに表示します。<select>要素(id属性demo)のjQueryセレクタに.on()メソッドで定めるのはchangeイベントのリスナーです。リスナー関数が引数に受け取るイベントオブジェクトのtargetプロパティで選ばれた要素が得られますので、valueプロパティの値を取り出します。それを目的の要素(id属性selectedId')に.text()メソッドで引数に与えれば、値がテキストとして加えられるのです。

予め選んでおく項目も、スクリプトで定めることにしましょう。.val()メソッドで要素のvalueプロパティの値が与えられます。そして、trigger()メソッドchangeイベントのリスナー関数を呼び出せば、選択値が表示されるのです。HTMLコードからは<option>要素のselected属性は除いて構いません。これで、ドロップダウンリストから選んだ項目の値がページに示されます(サンプル001)。


const initId = 1;
$(function() {
	const selectedId = $('#selectedId');
	$('#demo')
	.val(initId)
	.on('change', (event) =>
		selectedId.text(event.target.value)
	)
	.trigger('change');
});


<option value="1"><!-- selected>-->React.js</option>

サンプル001■jQuery: Dropdown list with a select element

02 Select2を読み込んで実行する

Select2プラグインのインストールは、「Installation」のページに説明があります(図002)。JavaScriptライブラリのほか、CSSも読み込まなければなりません。紹介されているのは、CDNとBowerおよびマニュアルのインストールの仕方です。

図002■Select2の「Installation」のページ

図002

ここでは、CDNを用いることします。「Installation」ページの「Using Select2 from a CDN」の項にはHTMLコードの記述があり、コピーボタンでコピーできます。プラグインのライブラリは、jQueyのあとに読み込まなければなりません。


<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

Select2を動かすには、<select>要素(id属性demo)のjQueryセレクタに対して初期化のメソッドselect2()を呼び出すだけです(「Basic usage」参照)。これでドロップダウンリストは、Select2のスタイルになります(図003)。


$(function() {

	$('#demo').select2()

});

図003■Select2のドロップダウンリスト

図003

リスト先頭のテキストフィールドは検索ボックスです(図004)。入力すると、リストがテキストを含む項目に絞られます。

図004■検索ボックスでリスト項目が絞れる

図004

03 リスト項目をデータから動的に加える

リスト項目は予めHTMLコードに<option>要素で書いておかなくても、select2()メソッドで動的に加えられます。そこで、<select2>要素から項目の<option>要素は、すべて除いてしまいましょう。


<select id="demo">
	<!--<option value="0">Vue.js</option>
	<option value="1">React.js</option>
	<option value="2">Angular</option>-->
</select>

項目のデータは、配列にオブジェクトで納めます(「Arrays」参照)。プロパティとして定めるのは、idtextのふたつです。idが項目の値、textはリストに示されるテキストです。データの配列は、select2()メソッドに渡す引数のオブジェクトにプロパティdataとして与えます。


const data = [
	{id: 0, text: 'Vue.js'},
	{id: 1, text: 'React.js'},
	{id: 2, text: 'Angular'}
];

$(function() {

	$('#demo').select2({
		data: data
	})

});

これで、Select2のドロップダウンリストにデータから項目が動的に加えられました。JavaScriptコードとHTMLの記述は、つぎのコード001にまとめたとおりです。実際の動きは、jsdo.itに掲げたサンプル002でお確かめください。

コード001■項目データを動的に加えたSelect2のドロップダウンリスト

JavaSciptコード

const data = [
	{id: 0, text: 'Vue.js'},
	{id: 1, text: 'React.js'},
	{id: 2, text: 'Angular'}
];
const initId = 1;
$(function() {
	const selectedId = $('#selectedId');
	$('#demo').select2({
		data: data
	})
	.val(initId)
	.on('change', (event) =>
		selectedId.text(event.target.value)
	)
	.trigger('change');
});

<body>要素

<div>
	<p>Selected: <span id="selectedId"></span></p>
	<select id="demo"></select>
</div>

サンプル002■jQuery + Select2 : Dropdown list with items dynamically loaded

04 複数選択リスト

<select>要素にmultiple属性を与えると、項目が複数選べるようになります。このリストでは、予め項目を撰択しておくのは止めましょう(もちろん選んでおくことも可能です)。また、あとの都合を考えて、<select>要素のjQueryセレクタは変数(select)にとっておきます。Select2が定める複数撰択リストは「pillbox」と呼ばれるスタイルです(図005)。標準のリストボックスのように特別なキー([command]/[Ctrl])を押すことなく、クリックで項目が撰択できます。もう一度リストの項目をクリックするか、選んだ項目の[x]ボタンを押せば削除です。


<select id="demo" multiple></select>


// const initId = 1;
$(function() {
	const select = $('#demo');

	// $('#demo').select2({
	select.select2({
		data: data
	})
	// .val(initId)

	// .trigger('change');
});

図005■リストから複数の項目が選べる

図005

05 選んだ項目の番号を示す

前掲コード001で扱ったのは単一項目のドロップダウンリストでした。したがって、撰択した項目として示す番号はつねにひとつです。けれども、複数撰択リストでは、複数の項目が選ばれるかもしれません。changeイベントのリスナー関数は書き直さなければならないのです。

選ばれた項目オブジェクトの配列は、<select>要素のjQueryセレクタに対してメソッドselect2('data')を呼び出せば得られます(「Using the data method」参照)。番号は項目オブジェクトのidプロパティでした。Array.map()メソッドを用いれば番号の配列がつくれるでしょう。そして、Array.join()メソッドで、番号をカンマ区切りの文字列に替えられます。


select.select2({
	placeholder: 'Select an option',

})
.on('change', (event) => {
	// selectedId.text(event.target.value)
	const selecions = select.select2('data')
	.map((element) => parseInt(element.id, 10));
	selectedId.text(selecions.join(', '));
});

これでSelect2の複数撰択リストで、選ばれた項目の番号を示すことができます。JavaScriptコードとHTMLの記述は、つぎのコード002のとおりです。また、以下のサンプル003にjsdo.itのコードを掲げました。なお、Select2のイベントには、項目を撰択したときのselect2:selectと削除した時のselect2:unselectもあり、ふたつの場合の処理を分けて定められます。

コード002■複数撰択リストで選ばれた項目の番号を示す

JavaSciptコード

const data = [
	{id: 0, text: 'Vue.js'},
	{id: 1, text: 'React.js'},
	{id: 2, text: 'Angular'}
];
$(function() {
	const select = $('#demo');
	const selectedId = $('#selectedId');
	select.select2({
		placeholder: 'Select an option',
		data: data
	})
	.on('change', (event) => {
		const selecions = select.select2('data')
		.map((element) => parseInt(element.id, 10));
		selectedId.text(selecions.join(', '));
	});
});

<body>要素

<div>
	<p>Selected: <span id="selectedId"></span></p>
	<select id="demo" multiple></select>
</div>

サンプル003■jQuery + Select2 : Multi-select dropdown list


作成者: 野中文雄
作成日: 2018年3月13日


Copyright © 2001-2018 Fumio Nonaka.  All rights reserved.