Web ページでドロップダウンを使用すると、画面全体の品質とデザインが向上します。 待ってください、何ですか? ラジオ ボタンとチェックボックスの両方に対する選択肢と言ったのですか? しかし、ラジオ ボタンだけでよかったのではないでしょうか。
ラジオ ボタンは複数の選択を許可せず、一方、チェックボックスは 1 つまたは複数の選択を許可します。 ユーザーはドロップダウン リストから 1 つのオプションしか選択できないため、機能的にはラジオ ボタンに似ていて、チェックボックスには似ていないのですね。
ここで、セレクト ボックスでの複数選択の概念が登場します。
どのようにしてユーザーがセレクト ボックスから複数のオプションを選択できるようにするのですか
ウェブ デザイナーの観点から言うと、ユーザーがセレクト ボックスから複数のオプションを選択することはかなりシンプルで簡単です。 私たちはただ、<select> 要素に「multiple」属性を追加するだけでよいのです。 さて、複数の選択肢を選択するためには、select 要素に size 属性も追加する必要があります。
ユーザーは、選択肢を選択するために Ctrl キー (Windows) と Command キー (Mac) を押し続ける必要があります。
<select name="Country" multiple size="5"> <option value="USA">USA</option> <option value="Russia">Russia</option> <option value="India">India</option> <option value="Britain">Britain</option></select>Note these points
-
The multiple” attribute is a Boolean attribute which when present, signify the multiple options can be selected.
-
Web デザイナーの視点から見ると、ドロップダウンからの単一選択と複数選択の HTML コードは少し異なりますが、エンド ユーザーの視点から見ると、この違いは Web ページでは見えません。 セレクトボックスは、どちらの場合もレイアウトやスタイルが変わることはありません。
-
前述の点を考慮すると、選択肢の数が少ない場合は、複数選択よりもチェックボックスを選択する方が良い選択となります。 Windows ではコントロール ボタン (Ctrl) が選択に使用されますが、Mac システムではコマンド ボタンがトリックを行います。
Ehancing the Dropdown
ご覧のように、ネイティブ HTML セレクトボックスは特に複数のオプションを選択するには非常に限られています。 そこで、JavaScript と非常に効果的なライブラリの出番となります。 select2 jQuery コンポーネントは、検索、動的ロード、タグ付けなどの実用性の高いオプションを組み込むとともに、セレクト ボックスの全体的なレイアウトをカスタマイズする力をデザイナーに提供します。 複数選択を有効にするには、属性として ‘multiple’ を含めます。
ここでの利点は、ユーザーが複数のオプションを選択するために Ctrl または Command キーを押す必要がないことです。 たとえば、ユーザーが選択できる数を制限するには、次のように Select2 オプションに maximumSelectionLength を追加します:
$(".js-example-basic-multiple-limit").select2({ maximumSelectionLength: 2});ドキュメントで Select2 についてもっと読む