web-dev-qa-db-ja.com

リストボックスから要素を選択する

次のように多くのアイテムを含むリストボックスがあります: enter image description here

このリストボックスで複数選択を有効にし、選択したリストアイテムを別のバケットに引き継ぎたい: enter image description here

今、私は一度に複数のアイテムを選択する最良の方法を見つけたいと思っています、私が考えた2つのアプローチは:

  • キーボードのCtrlキーを使用して複数のエントリを選択しますが、タスクを実行している間はそれを押し続ける必要があります。
  • 各アイテムをエンティティとして扱い、そのアイテムを1回クリックすると、アイテムが選択および選択解除されます。このアプローチでは、キーボードを完全に操作する必要はありません。

私はより良いアプローチ、あるいはもしあれば全く異なるアプローチを特定したいと思います。

1
Nirav Chadda

Google-マテリアルデザイン-選択パターン に基づいて私の答えをサポートしています

選択したアイテムをタップして選択を解除します。選択されていないアイテムをタップして選択します。

また、長いリストでは、ユーザーが既に選択したものをユーザーに示すことをお勧めします。

これは、複数の選択メニューを持つマテリアルデザインチップと同様のパターンで実現できます。

次に例を示します。

enter image description here

ライブの例:md-chips with multiple select men

3
dimshik

Jqueryコンポーネント https://select2.github.io/examples.html#multiple 最もよく使用され、モバイルデバイスに適応します https://harvesthq.github.io/chosen /

1
elena baranova

慣れ親しみがあり、痛みの少ない相互作用(チェックボックスの使用)にこだわるほうが安全な場合があります。

CTRLはOS用に予約されており、選択を失うリスクは非常に大きくなります。さらに、これはショートカットメソッドと見なされるため、ユーザーが非表示の機能を発見することに依存しないでください。

チェックボックスを使用し、Shiftキーで補完してバッチ選択を行います。また、フィルターや検索を使用してリストを絞り込む方法をユーザーに提供します。

0
Nicolas Hung