skillup

技術ブログ

JavaScript デザイン

jquery multipleについて(基本編)

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

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

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

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

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

プラグイン

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

http://loudev.com/

インストール

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

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

参考リンク

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

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

-JavaScript, デザイン
-

執筆者:


comment

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

関連記事

no image

font-awesomeのインストール(タスクランナー経由)

fontawesomeをタスクランナー経由でインストールすることについて。 CDNでインストールするだけならURL張り付けるだけですが。 インストール まずnpmで下記コマンドでインストールをします。 …

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …

no image

レイアウトカラム落ち対策

自分のPCでは大丈夫なんだけど、別PCで見るとカラム落ちするケースがあり、ちょっと対策を。 もちろん幅調節とかそういうのはなし。 Contents1 flex-wrap:nowrap2 display …

no image

vueについてのポイント

vueについて学習した時のポイントなどを。 Contents1 機能として確認したこと2 component3 vue-route4 vuex5 computed6 created,mounted7 …

no image

ドロップダウンリスト

本日はヘッダーメニューとかで見られるドロップダウンリストについて。 bootstrapを使った方法は下記に。 http://skill-up-engineering.com/?p=1157 通常のHT …