スポンサードリンク
フォームのセレクトボックスで
複数選択するときに、
標準のままだと
Ctrlキーを押しながら選択しなければいけないのと
選択したものがわかりにくいと感じたため
2つの窓を使って選択できるものが欲しかったのです。
今回、ちょうどいいプラグインがあったので使ってみました。
スポンサードリンク
1.本家サイトに行ってプラグインをダウンロード
上記のURLのサイトへ行って
ヘッダーにあるダウンロードからプラグインをダウンロードします。
2.ダウンロードしたファイルをアップロード
ダウンロードしたフォルダの中で使うのは
css/multi-select.css
img/switch.png
js/jquery.multi-select.js
の3つのファイルです。
各ファイルを使うサイトの
css、img、jsフォルダに入れます。
環境によってフォルダ名が変わる場合は
multi-select.cssの最初に書かれている
.ms-container{
background: transparent url('../img/switch.png') no-repeat 50% 50%;
width: 370px;
}
画像の指定先を変更すればいいと思います。
スポンサードリンク
3.ファイルを読み込む
<head> <link href="css/multiselect.css" media="screen" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.multi-select.js"></script> </head>
※環境によってリンク先は変更してください。
jsファイルはbodyタグの閉じる直前で読み込ませても問題なしです。
4.セレクトボックスにIDを指定
<select multiple="multiple" id="multi-select" name="multi-select[]"> <option value='elem_1' selected>elem 1</option> <option value='elem_2'>elem 2</option> <option value='elem_3'>elem 3</option> <option value='elem_4' selected>elem 4</option> ... <option value='elem_100'>elem 100</option></select>
※ここではID名をmulti-selectとしています。
スポンサードリンク
5.指定したIDでmultiselectを使えるようにする
4で指定したID名のセレクトボックスにmultiselectを使えるようにします。
3で読み込んだjsファイルの下に
<script type="text/javascript">
$(function()(){
$('#multi-select').multiSelect();
});
</script>
と書くだけです。
そうすると、このような感じになり
複数選択がしやすくなります。
色々オプションもあるみたいなので
本家サイトで確認してみてください。
スポンサードリンク
