skillup

技術ブログ

JavaScript デザイン

jquery multipleについて(基本編)

投稿日:

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

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

csvheader

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

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

プラグイン

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

http://loudev.com/

インストール

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

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

参考リンク

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

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

-JavaScript, デザイン
-

執筆者:


comment

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

関連記事

no image

JavaScriptのコールバック関数について

Angularをやるうえで前提となるJavaScriptの知識を書いていこうかと。 関数を変数として扱い、別の関数の引数にできる JavaScriptの特徴の1つとして関数を変数のように扱えるというの …

no image

npmでのJSライブラリインストール&ビルド(※gulp使用時)

こちらのリンクでJSのnpmパッケージでのインストール&ビルドをしたので、gulpでのビルドを。 前提条件としては nodeのインストール npmのインストール がされていればOKです。 最小構成でい …

no image

途中入力離脱防止処理 JavaScript

WordPressの入力画面なんかでは実装されていますが、途中で文字入力をしてページりだすをしようとするとブラウザのアラートがでます。これも一般のお問い合わせフォームなんかでも実装可能です。 この場合 …

no image

CSSのレイアウト例 その3 固定+リキッドレイアウト

本日は固定レイアウト+リキッドレイアウトについて。 リキッドレイアウトとはブラウザの幅に合わせて表示を変える方法でして、スマホが一般的となった現在では非常によく使われています。 今回解説するのは例えば …

no image

CSSデザインネタリンク集

デザインモックがないとき用のリンク集なもの Contents1 管理画面テンプレート1.1 一般系1.2 Bootstrap系の管理画面テンプレート2 ワンポイント系2.1 ワンポイント系のリンク集2 …