skillup

技術ブログ

JavaScript デザイン

jquery multipleについて(基本編)

投稿日:2016年3月15日 更新日:

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。

今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更したいときです。

左の項目から任意の項目を選び、クリックすると右側に値が移動します。

いろいろと大変だったんで今回メモします。

プラグイン

multiselectというプラグインです。そのまんまや・・・

http://loudev.com/

インストール

ほとんど公式のコピペなんですが、下記のように書けば動きます。

これだけでスクショでとったようなきれいな複数選択が可能になります。

参考リンク

jQuery プラグイン : multiselect.js の使用方法とカスタマイズ

しかし、順番を保持したい場合、さまざまな難題が付きまといます。これについては次回。

-JavaScript, デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

フォーカス時のみ書き込み可能になるHTML要素について。contenteditableなど

通常はただのテーブル(or普通のHTML)ですが、クリックするとinputになり、入力が可能になる手法について。 contenteditableなど 普通のHTML要素に [crayon-61e4f9 …

no image

JavaScriptライブラリ sugar

去年、JavaScriptの仕事をがりがりやった時にお世話になったライブラリsugar。 JavaScriptのライブラリというとunderscore.jsが有名ですが、こいつも結構使えるライブラリで …

no image

vueでのコンポーネント間の変数のやりとりに関して

vueをコツコツと勉強していますが、コンポーネント間で変数の受け渡しをしたいときなどは色々注意が必要かと思います。 個人的には下記のような解釈で組んでおります。 Contents1 vuex2 syn …

no image

一般的なWebサイト制作について

実務で通常のWebサイトを作成するというお仕事が。 Webサイトを改めて作成するっていう経験からはだいぶ遠のいてましたんで、これを機にスキルをまとめたいなーって思います。 サイト作成といっても本格的な …

no image

ajaxがらみのイベントの発動とwhenに関して

実務で住所のプルダウンを実装する機会がありました。 [東京都][中央区][明石町] みたいにカテゴリーが2〜3あって連動するプルダウンのパターンです。 これを実装するときのポイントですが、新規保存より …