Skip to content

ドロップダウンをリッチ化するライブラリまとめ

by : 2018/01/09

HTMLのドロップダウンリストはよく使われるUIコンポーネントです。しかし標準のデザインでは使い勝手が良いとは言えません。一つ選択する際にも長くスクロールしなければならなかったり、複数選択では途中で解除されてしまったりします。

そこで今回はドロップダウンリストを便利にしてくれるライブラリを紹介します。

Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes

フィルタリング機能、複数選択対応、選択済みアイテムのハイライト表示、グルーピングなど多機能にしてくれます。左寄せだけでなく、右寄せにもできます。

Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes

Dropdown Check List

複数選択のドロップダウンリストにチェックボックスが追加されます。常にキーを押しておく必要がなくなるので便利です。

Dropdown Check List

highrisehq/lufo: Tracks the most recent options chosen on a <select> element and displays them at the top of the list

最近選んだ項目を上に表示してくれます。地味な機能ですが、同じフォームを何度も使う機会がある場合に便利です。

highrisehq/lufo: Tracks the most recent options chosen on a <select> element and displays them at the top of the list

Fabianlindfors/multi.js: A user-friendly replacement for select boxes with multiple attribute enabled

複数選択可能なドロップダウンがかなり大きくなります。選択するとグレーアウトし、選択項目が右側に移る仕組みになっています。

Fabianlindfors/multi.js: A user-friendly replacement for select boxes with multiple attribute enabled

ddSlick – a jQuery plugin for custom drop down with images

ドロップダウンの項目にアイコンと説明書きが付けられます。かなり派手な表示になるので、用途は限られるかも知れませんが便利なライブラリです。

ddSlick – a jQuery plugin for custom drop down with images

matrushka/Dropp: A replacement for html dropdowns

クリックすると表示状態を維持してくれるようになり、複数選択もキーボードの補助なしでサポートされます。選択された項目はカンマ区切りで並べて表示されます。

matrushka/Dropp: A replacement for html dropdowns


使い勝手の悪い機能でもJavaScriptの力で一気に便利に変身させられます。業務においても使い勝手の悪いまま使うよりもよっぽど生産性が向上するでしょう。UIが大きく変わるので操作性に慣れる必要がありますが、一度慣れてしまえば手放せないライブラリになりそうです。

From → HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。