it-swarm.com.de

Ergebnisse der Combobox-Auswahl

Das Kombinationsfeld ist relativ einfach auszuwählen, aber weniger nützlich, wenn Sie sehen möchten, was Sie bereits ausgewählt haben. Gibt es eine Empfehlung, wie die Ergebnisse der Auswahl des Kombinationsfelds angezeigt werden sollen? Das Ziel ist, dass der Benutzer auf einen Blick leicht sehen kann, was ausgewählt wurde, ohne zu scrollen, und dass auch Änderungen an der Auswahl vorgenommen werden können. (später hinzugefügt) Ich habe gerade eine gute Lektüre zu verwandten Themen über Vor- und Nachteile verschiedener Mehrfachauswahlansätze gefunden http://www.ryancramer.com/journal/entries/select_multiple/

Ein paar Möglichkeiten, die ich bisher habe:

enter image description here

Ich bin kein großer Fan der folgenden Option, da es mehrere Klicks erfordert, um Dinge auszuwählen, und es mehr Steuerelemente gibt, die mehr kognitive Belastung erzeugen.

enter image description here

Ich könnte auch in Betracht ziehen, die Modi "Nur anzeigen" und "Bearbeiten" zu verwenden, aber das würde mehr Codierung bedeuten, daher suche ich nach anderen Möglichkeiten.

13
Anna Rouben

Es gibt zwar verschiedene Möglichkeiten, um das zu tun, was Sie verlangen. Ich bevorzuge die Eingabemethode "free tag" (nicht sicher, ob es einen besseren Namen für diese Komponente gibt). Grundsätzlich dürfen Benutzer Begriffe/Tags/Werte in eine provisorische Eingabe eingeben. Vorgeschlagene/automatisch vervollständigte Begriffe Begriffe/Tags werden dem Benutzer während der Eingabe angezeigt. Wenn Begriffe abgeschlossen/ausgewählt sind, werden sie in eigenen Mini-Containern angezeigt, die auch das Entfernen mit einem Klick ermöglichen.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Ein funktionierendes Beispiel-Plugin finden Sie hier: TextExt . Hoffe das hilft!

15
JeffH

Das Chosen Javascript-Plugin ist möglicherweise genau das, wonach Sie suchen. Es kompiliert alle vorherigen Auswahlen in einem Nice-Stapel, während Sie weiterhin eine Auswahl treffen können.

Chosen screenshot

9
Taj Moore

Ihre erste Option ist in Ordnung, außer dass ich die ausgewählten Elemente horizontal unter der Kombination auflisten würde. Dies bringt Ihr Layout nicht so durcheinander wie die vertikale Liste.

Die Lösungen, mit denen die ausgewählten Elemente in die sichtbare Zeile eingefügt werden, skalieren nicht über zwei oder drei sehr kurze Elemente hinaus, ganz zu schweigen von langen. Sie lassen Sie auch nicht einfach Ihre Gegenstände entfernen, weil Sie nicht wirklich auf die X-Taste Sache können. Sie müssen auf das Feld klicken, um das Feld zu erweitern, damit Sie es nicht in mehrere Regionen unterteilen, in denen durch Klicken auf einige das Feld erweitert und durch Klicken auf andere das Element entfernt wird. Das X-Ding funktioniert gut außerhalb der Box.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Übrigens, nur um die Terminologie zu beachten - ein Kombinationsfeld ist nicht eines, in dem Sie eine Kombination von Elementen auswählen können, sondern ein Dropdown-Menü, in das Sie auch eingeben können. Ich bin nicht sicher, wie der richtige Name eines Kontrollkästchens lautet.

4

Ich habe die Antwort von @ JeggH positiv bewertet.

Wenn die Liste der verfügbaren Elemente nicht zu lang ist, ist dies ein weiterer Ansatz:

enter image description here

2
JOG