select要素のoptionをポップアップ選択できるUIを実装するjQueryプラグイン PopSelect

select要素のoptionをポップアップ選択できるUIを実装するjQueryプラグインを紹介します。

要素のoptionをポップアップで選択できるようにするjQueryプラグイン
PopSelect

PopSelectはselect要素のoptionをポップアップ選択できるUIを実装するjQueryプラグインです。

このように、<select>内のoptionがポップアップで表示され、追加、削除ができます。

要素のoptionをポップアップで選択できるようにするjQueryプラグイン

WordPressやレシピサイトで使い慣れたタグの複数選択に近いUIです。

スポンサーリンク

実装方法

サンプルページを用意しました。最大選択数は4つに制限してあります。

実装は簡単です。

ソースを公式サイトの下の方にある「DOWNLOAD NOW!」のボタンからダウンロードします。

ファイルを展開したら、「dist」フォルダに入っている、「jquery.popSelect.css」と「jquery.popSelect.min.js」を使います。

CSS

「jquery.popSelect.css」を読み込みます。

JS

「jQuery」と「jquery.popSelect.min.js」を読み込みます。

HTML

HTMLを用意します。

<body>閉じタグの前などでスクリプトを実行します。

「maxAllowed」を設定すると、選択可能数に制限をつけることができます。

以上で実装は完了です。

スポンサーリンク
PopSelect – select要素のoptionをポップアップ選択できるUIを実装するjQueryプラグイン

みんなが見ている記事

コメントを投稿する

  • Posted on 2016.05.28
  • Views 637