web-dev-qa-db-ja.com

複数のチェックボックスを選択してドロップダウンリストを表示するための優れたユーザーインターフェイス（表示/編集可能モード）

Dropdownlistと多くのCheckboxsがあります。特定のドロップダウン値を選択すると、すべてのチェックボックスが表示され、それらがそのドロップダウン値とのデータベース関係である場合は、チェックボックスを設定しましたSelected=true;

ユーザーは特定のドロップダウンリストのie（check/uncheckチェックボックス）を編集することもでき、これはデータベースに保存されます

私が試したUIのいくつかのオプションは次のようになります。

オプション1 enter image description here

オプション2

enter image description here

gui-designlayoutcheckboxesdrop-down-list
8
Satinder singh

http://loopj.com/jquery-tokeninput/ を確認してください。多くのチェックボックスがある場合、すべてのチェックボックスを表示するのは良くないと思います。ただし、Tokeninputを使用すると、ユーザーは複数のチェックボックスをタグとしてチェックできます。したがって、データベース内の選択数を気にする必要はありません。欠点は、ユーザーが選択できるすべての選択肢を知っているわけではないことです。すべての選択を表示するには、タグクラウドでTokeninputを使用する必要がある場合があります。

Tokeninput

Youtube

ユーザーが業界を選択でき、多くのチェックボックスを表示するスペースが多い場合は、option1が好きです。 Youtubeの検索フィルターは、別のフォームでチェックボックスを表す方法の良い例です。

ユーザーは業種を選択してすべての選択肢を見ることができますが、2番目のオプションの場合、ユーザーは下にスクロールしてチェックボックスを表示およびチェックする必要があります。多くの項目があるドロップダウンリストは望ましくないことを想像できます。たとえば、国のドロップダウンリスト

7
Lookchin