[JS]このアイデアは面白い！セレクトボックスの選択肢をすぐに選択できるようにするスクリプト -Quick[select]

フォームのセレクトボックスは多くの選択肢を配置できる便利な要素ですが、他のフォームと操作性が異なるため一連の流れで入力しにくいのが弱点です。
セレクトボックスの操作性を改善し、デザインも簡単に変更できるスクリプトを紹介します。Quickの名前の通り、すぐに選択できるようになります。

Quick[select]
Quick[select] -GitHub

• Quick[select]の特長・デモ
• Quick[select]の使い方

Quick[select]の特長・デモ

まずは、一般的なセレクトボックス。

通常のセレクトボックスの挙動

セレクトボックスは、タップとクリックの2つのオペレーションがあります。これはフォームの他の要素と操作性が異なり、ユーザーをフォームの一連の流れから外してしまうものです。
そこで注目すべき点は、通常セレクトボックスの選択肢の中にはより多く選択されるものがあることです。上記の例だと、「はい」「いいえ」が多いでしょう。

Quick[select]は、セレクトボックスの選択肢の中から、いくつかを表示させておくことができます。

Quick[select]のセレクトボックスの挙動

上記の例では、「朝食」「昼食」「夕食」を表示させています。

セレクトボックスのHTMLは、通常通りのコードでOKです。

Quick[select]で表示させるものを指定します。

選択肢を全て表示させておくこともできます。

選択肢を全部表示

テーマも用意されており、簡単にデザインを変更することもできます。

デザインのバリエーション: Material Design Lite theme

Quick[select]の使い方

Step 1: 外部ファイル

当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。

Step 2: HTML

セレクトボックスは通常通りのHTMLでOKです。

Step 3: JavaScript

jQueryのセレクタでセレクトボックスを指定し、スクリプトを実行します。
あらかじめ表示させておく選択肢は、「breakOutValues」に指定します。