My Photo

« ワールド・ウォーZ | Main | 2014年夏アニメ感想 »

September 28, 2014

選択リストを拡張するSelect2

Select2はjQuery UIで選択リスト拡張するライブラリ。選択リストで複数選択可能な場合、便利そうだなと。
複数選択可能な場合のサンプルコード test_select2.html を以下に示す。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Select2のテスト</title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<link type="text/css" rel="stylesheet" href="/css/jquery-ui-1.10.4.min.css" />
<link type="text/css" rel="stylesheet" href="/css/select2.css" />
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="/js/select2.min.js"></script>
<script type="text/javascript">
$(function() {
  $("#select2Test").select2();
});
</script>
<style type="text/css">
.result { width: 300px; min-height: 100px; border: solid 2px; }
</style>
</head>
<body>
<div>
<form action="./select2_test_2.php" name="form" id="form" method="post">
<p>
	<select multiple="multiple" name="select2Test[]" id="select2Test" style="width: 300px;">
		<option value="">--</option>
		<optgroup label="自動車">
			<option value="7201">日産自動車</option>
			<option value="7203">トヨタ自動車</option>
			<option value="7267">本田技研工業</option>
		</optgroup>
		<optgroup label="空運">
			<option value="9202">ANAホールディングス</option>
		</optgroup>
		<optgroup label="通信">
			<option value="9432">NTT</option>
			<option value="9433">KDDI</option>
			<option value="9984">ソフトバンク</option>
		</optgroup>
	</select>
</p>
<input type="submit" value="submit" />
</form>
</div>
</body>
</html>

select要素のname属性に "[]" が付いているのに注意。複数選択可能なので配列形式にしないと選択された項目をすべて取得することができない。

ファイルは以下のように配置した。Select2 の画像ファイルを /css/images に置いたので、select2.css の画像を指定している部分のパスを書き換えた。
ダウンロードした select2 のzipファイルには画像ファイルは下記にある以外に selec2x2.png というのも含まれているが、なくても特にエラーにならなかった。

[ドキュメントルート]
├[css]
│├[images]
││├jQuery UI の画像ファイル
││├select2.png
││└select2-spinner.gif
│├jquery-ui-1.10.4.min.css
│└select2.css
└[js]
  ├jquery-1.9.1.min.js
  ├jquery-ui-1.10.4.min.js
  └select2.min.js

2つの項目を選択すると下のようになる。選択を解除するには項目名のラベルにある×印をクリックする。

Select2_sample_1

ここで、入力フィールドをクリックすると、選択リストは下のようになる。既に選ばれている項目は選択肢から取り除かれている。

Select2_sample_2

また、入力フィールドに文字を入力すると、その文字によって下のよう選択肢が絞り込まれる。

Select2_sample_3

現在選択されている項目をjQueryで以下のように取得できる。val属性の値を取得するということか。

$("#select2Test").select2("val"));

選択するコードは以下になる。1個だけ選択するなら第2引数を配列にする必要はない。

$("#select2Test").select2("val", ['9432', '9433', '9984']);

選択リストの拡張ライブラリには他に Chosen というのがある。自分は使ってないが Chosen を使ったページを触ってみたら、選択肢が日本語だと選択肢の絞込みはできないようだった。

参考ページ:
Select2 3.5.1
[JS]セレクトボックスの使い勝手をパワーアップするスクリプト -Select2 | コリス
セレクトボックスを100倍使い易くする!! | CoDE4U

« ワールド・ウォーZ | Main | 2014年夏アニメ感想 »

JavaScript」カテゴリの記事

Comments

Post a comment

(Not displayed with comment.)

TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/26461/60390268

Listed below are links to weblogs that reference 選択リストを拡張するSelect2:

« ワールド・ウォーZ | Main | 2014年夏アニメ感想 »

March 2017
Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
無料ブログはココログ

日本blog村

  • にほんブログ村 IT技術ブログへ
  • にほんブログ村 アニメブログへ
  • にほんブログ村 サッカーブログ アルビレックス新潟へ

好きな音楽家

メモ

XI-Prof