selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。
今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更したいときです。
左の項目から任意の項目を選び、クリックすると右側に値が移動します。
いろいろと大変だったんで今回メモします。
プラグイン
multiselectというプラグインです。そのまんまや・・・
インストール
ほとんど公式のコピペなんですが、下記のように書けば動きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="text/javascript" src="任意のjquery"></script> <link type="text/css" href="multi-select.css" rel="stylesheet" /> <script type="text/javascript" src="jquery.multi-select.js"></script> <script type="text/javascript"> $('#hoge_id').multiSelect() </script> <select multiple="multiple" id="hoge_id" name="hoge[]"> <option value='val_1'>label_1</option> <option value='val_2'>label_2</option> <option value='val_3'>label_3</option> <option value='val_4'>label_4</option> </select> |
これだけでスクショでとったようなきれいな複数選択が可能になります。
参考リンク
jQuery プラグイン : multiselect.js の使用方法とカスタマイズ
しかし、順番を保持したい場合、さまざまな難題が付きまといます。これについては次回。
