jQueryプラグイン 複数選択可能なmultiselectを使ってみました。

jQuery

jQuery

フォームのセレクトボックスで

複数選択するときに、

標準のままだと

Ctrlキーを押しながら選択しなければいけないのと

選択したものがわかりにくいと感じたため

2つの窓を使って選択できるものが欲しかったのです。

今回、ちょうどいいプラグインがあったので使ってみました。

スポンサードリンク

1.本家サイトに行ってプラグインをダウンロード

jQuery multiselect

jQuery multiselect

jQuery multiselect

上記の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>

と書くだけです。

jQuey multiselect_demo

jQuey multiselect_demo

そうすると、このような感じになり

複数選択がしやすくなります。

色々オプションもあるみたいなので

本家サイトで確認してみてください。

スポンサードリンク

コメントを残す

サブコンテンツ

このページの先頭へ