skillup

技術ブログ

JavaScript デザイン

jquery multipleについて(基本編)

投稿日:

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

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

csvheader

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

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

プラグイン

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

http://loudev.com/

インストール

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

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

参考リンク

http://logicalerror.seesaa.net/article/408512412.html

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

-JavaScript, デザイン
-

執筆者:


comment

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

関連記事

no image

HTML5のinputタグのvalidatorについて

HTML5は標準でinputタグのバリデーション機能がついており、必須チェックや簡単なエラーチェックなどをすることが出来たりします。 必須入力のほかにも、telやemail、時間など様々なタイプのもの …

no image

UIまで手が回らないプログラマのための画像加工サービス&ツール紹介など

本業はプログラマ―なんですが、ガチンコ塾のブログの画像を作る程度の加工などをちょこちょこやってます。 プログラマーといえどUIを全く気にしないのは問題ですし、中小企業だと広く浅くできる人間が求められる …

no image

jQuery modalダイアログについて&重複時間処理

Contents1 jqueryモーダルダイアログ1.1 あらかじめ読み込むライブラリ1.2 ソース本体1.2.1 Html側1.2.2 Javascript側1.2.3 参考リンク2 重複時間につい …

no image

ページャープラグイン dataTable

レコードを一覧表示する上で意外と面倒くさいのがページャーでしょう。 自力で作成してもよいのですが、なかなかこれが面倒だったりします。 また近年ではリンクを踏ませずに、スクロールするだけで表示ができる形 …

no image

固定されたナビ(ヘッドとサイド)

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。 Contents1 ヘッダーを固定したい場合2 サイドバーを固定したい場合3 参考リンク ヘッダーを固定し …