HTML multi select nur einen von mehreren auswählen?
Hallo zusammen,
ich will ein multiselect haben, mit mehreren values wie season (Jahreszeit). Dabei soll man natürlich aber nur eine der 4 ankreuzen können. Klar könnte man es jetzt als nicht multi machen, allerdings sind in dem multiselect auch Sachen drinnen wie ob es ein See ist oder Berge sind, was man ja auch noch ankreuzen kann.
<select name="ary[]" multiple="multiple">
<option value="season" >Option 1</option>
<option value="season">Option 2</option>
<option value="season">Option 3</option>
<option value="season">Option 4</option>
<option value="sea">sea</option>
</select>
Und man soll halt hier vom value season nur 1 auswählen können aber gleichzeitig halt sea trz noch zusätzlich. Ist das irgendwie machbar?
6 Antworten
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
https://www.w3schools.com/tags/att_input_type_radio.asp
Wenn allerdings eine einzelne der Optionen in jedem Fall zusätzlich verwendet werden soll, bietet sich hierfür eine eigene Checkbox an - was sowieso die saubere Lösung ist.
https://www.w3schools.com/tags/att_input_type_checkbox.asp
Ansonsten bliebe nur JavaScript/ECMAScript (und natürlich ein deutlicher Hinweis im Text über der Auswahlliste, wie diese Optionen gedacht sind). Aber das würde ich ehrlich gesagt als Anwender als Respektlosigkeit mir gegenüber auffassen.
Und für Behinderte unbedienbar sein
Ja richticht select Buttons und Checkboxen
Kommt drauf an, was genau möglich sein soll.
Gibt es mehrere Gruppen, aus der jeweils genau ein Element ausgewählt werden soll? Dann sollten diese Gruppen auch getrennt werden. Für längere Listen eine Dropdown-List - <select> - (ggf. mit Zusatzpunkt "keine"), für Einzeloptionen eine Checkbox.
Gibt es eine Gruppe, aus der mehrere beliebige Optionen ausgewählt werden sollen, aber eine maximale (oder genaue) Anzahl festgelegt ist?
Danke für deine Antwort. Also ich stelle es mir evtl vor das man ein drop down menu hat mit den Unterpunkten zbs Season, Time und Features (Nur beispiel). Dann soll man bei Time und season natürlich nur eine sache angeben können also kein multiple select. Allerdings hat man ja evtl mehrere Features die man sehen kann (Ach ja btw es geht um tagging von bildern die man hochlädt und die in eine Datenbank dann per php eingetragen werden). Das heisst bei features wäre ein multiselect ganz praktisch. Hab aber keine Ahnung mit was man sowas an besten umsetzt evtl am schönsten für benutzer. Muss nicht perfekt sein, ist ja nur für heimgebrauch ;) VG und danke nochmals
Meistens wird gesagt, dass ein Mulit-Select ohne JavaScript nicht möglich ist. Aber es gibt eine Möglichkeit, ein Element mit einem Button ein- und auszublenden:
https://codepen.io/fedmysoul/pen/xbdNJm
In dieses Overlay kann man ohne Weiteres ein Multi-Select einbauen (habe es ausprobiert). Oder eine Reihe von Checkboxes.
Allerdings könnte das Ganze ein wenig Anpassung erfordern, um halbwegs gut auszusehen.
Kann man vllt irgendwie multiple select mit suchen machen
Ja. Dafür gibt es das <datalist>-Element:
<form action="#">
<label for="search">Vogelart</label>
<input type="search" id="search" list="Vögel">
<datalist id="Vögel">
<option value="Amsel">
<option value="Buntspecht">
<option value="Drossel">
<option value="Eisvogel">
<option value="Fink">
<option value="Spatz">
<option value="Specht">
</datalist>
<button>finden!</button>
</form>
Werde ich auch testen, vielen dank! :)
Funktioniert das auch mit Mehrfachauswahl?
Nein. Diese Voruassetzung habe ich übersehen. Hab nur "durchsuchbar" gelesen und da kam mir das <datalist>-Element in den Sinn.
Allerdings werden es am ende so ca 30 tags, was glaube ich mit ankreuzen auch keine gute lösung ist.
Ob Ankreuzen oder Liste ist eigentlich egal.
Der User muss alle ansehen und auswählen.
Bei so vielen könntest du evtl Gruppieren
Zb die Gruppe anwählen und dann im 2. Schritt die entsprechenden Elemente anzeigen
Alle 30 würde ich auch nicht gleichzeitig anzeigen
Und erst recht nicht in einer Liste zum scrollen
So eine Selectionliste macht man nur bei eindeutigen gleichwertigen Elemente wie z.b. Orten
Ach ja btw es geht um tagging von bildern die man hochlädt und die in eine Datenbank dann per php eingetragen werden
Ah
Erst jetzt gesehen
Wenn man eh PHP Kenntnisse hat, dann ist die dynamische Anzeige ja einfach.
Also immer nur die Optionen anzeigen die auch Sinn machen.
Aus Nutzersicht wäre es am komfortabelsten, wenn es für jede Kombination einen Eintrag gäbe oder, falls dies zu unfangreich sein sollte, dass die Auswahl in zwei Schritten erfolgt. Erst die Jahreszeit und in Abhängigkeit derer in einer zweiten Auswahlliste die Landschaft.
Hi, kurze Frage. Hast du hierzu ein Biespiel bzw gibt es schon Codeblöcke dafür. Bin eigentlich nicht der Frontend fan sondern mehr backend, will trotzdem aus fun mir mal bissel beibringen. Mehr wissen ist besser als weniger :) VG
Glaub mir, meine Codebeispiele willst du nicht haben. Habe nach HTML 5 und ein bisschen JavaScript aufgehört, mich damit zu beschäftigen.
Heutzutage gibt es ganz sicher Bibliotheken mit Methoden "erfuelleDenZweck" oder so.
Das müsstest du mit JavaScript lösen, wo du abfragst, was ausgewählt ist und immer beim neuen Select event schaust, was gewählt wurde und bei falscher Wahl wieder abwählst
Wenn du Multi Select willst, aber bestimmte Elemente nicht doppelt sein dürfen? Nein, das kann HTML nicht. Ich glaube du hast seine Frage nicht ganz verstanden 😅
Das macht man mit HTML5
Wie willst du mit HTML5 umsetzen, dass man aus einer Multiselect Liste von vier gegebenen Elementen maximal eines auswählen darf, allerdings zusätzlich noch ein fünftes Element auswählen darf?
Konkret: wie lässt sich umsetzen, dass du in diesem multi select nur eine Fleischsorte auswählen kannst aber zusätzlich auswählen kannst ob du Ketschup willst oder nicht?
<select ...>
<option>Steak</option>
<option>Schnitzel</option>
<option>Wurst</option>
<option>Mit Ketchup</option>
</select>
Das ist so auch falsch
1 Selection des Fleisch
Und zusätzlich eine Option für Ketchup
Das macht man nicht mit einer select List.
Das ist totaler Unsinn und nicht Benutzerfreundlich
Schon gar nicht behindertengerecht.
Doch das kann man mit HTML5 dass man eine Auswahl der 4 Jahreszeiten macht.
Zusätzlich noch Selektion von See, Berge, ..
Entweder auch 1 aus x
Oder jede Option auswählbar.
Warum soll das mit HTML5 nicht gehen,
Ob man das macht oder nicht, das war doch nicht die Frage. Die Frage war, wie man das macht und nicht weiter. Es ist dem Fragesteller überlassen, was er macht, da haben wir nicht mit zu entscheiden
Siehe Kommentar von EinAlexander. Wenn du immer noch so denkst, das es in HTML geht, hast du es immer noch nicht verstanden, worum es geht
Es ist dem Fragesteller überlassen, was er macht, da haben wir nicht mit zu entscheiden
Stimmt
Aber warum umständlich mit JS
Siehe Kommentar von EinAlexander. Wenn du immer noch so denkst, das es in HTML geht, hast du es immer noch nicht verstanden, worum es geht
Doch ich habe die Frage verstanden und schon öfters gemacht
Doch das kann man mit HTML5
das sagtest du bereits. Meine Frage war, WIE das denn in HTML5 geht?
Das macht man nicht mit einer select List.
Ich weiß. Dennoch sagst du, dass das ginge. Magst du uns konkret mit einem Code-Bespiel zeigen, wie das geht?
Einfach nur mit HTML:
Select button für die 1 aus X Auswahl
Und Checkbox für die einzelnen Optionen oder 2. select Gruppe
Je nach Aufgabenstellung
Einfach nur mit HTML
Select button für die 1 aus X Auswahl
Und Checkbox für die einzelnen Optionen oder 2. select Gruppe
Je nach Aufgabenstellung
Select button für die 1 aus X Auswahl Und Checkbox für die einzelnen Optionen oder 2. select Gruppe
Mir scheint, du hast die Fragestellung des FS nicht verstanden. Er wollte alles ausschließlich in einem multi select machen. FaTech hat ihn darauf hingewisen, dass genau das nur mit HTML nicht geht. Woraufhin du behauptet hast, dass das ginge.
Jetzt präsentierst du eine Lösung, die die Anforderung des FS gar nicht erfüllt.
So weit waren wir schon :-)
Hast du sich schon mal mit HTML5 und Formularen beschäftigt?
1 aus X Auswahl Und Oprionen sind doch neben den Texteingaben wie Name und Adresse die Standards.
1 aus X Auswahl erkennt man sofort an den runden Sekelektionsfeldern
OPTIONEN bei denen beliebig viele Anklickbar sind erkennt man an den Qudraten.
🤷♂️
Im übrigen gibt es gute Schulungs Wesites für HTML5
https://www.w3schools.com/html/html_forms.asp
https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/browsereigene_Validierung
https://www.html-seminar.de/formulare.htm
...
...
Hast du sich schon mal mit HTML5 und Formularen beschäftigt?
Ja. Und hast Du Dich schon mal mit der Frage des FS beschäftigt? Der will das nicht mit checkboxen und nicht mit radiobuttons lösen sondern ausschließlich mit multi selects.
Und genau dass macht keinen SINN
Es wird unübersichtlich und unbenutzte bei über 30 Optionen die wahrscheinlich noch nichtmal zu den Selectionen passen
Warum willst du etwas implementieren was so keinen SINN macht.
Frage und Anmerkungen des Fragestellers richtig lesen
Und genau dass macht keinen SINN
Natürlich macht das keinen Sinn. Die Frage des FS war aber nicht, ob das Sinn macht.
Frage und Anmerkungen des Fragestellers richtig lesen
dito.
Natürlich kann man die einzelnen Gruppen auch als Listenauswahl machen. - Aber eben nicht alles in eine unübersichtliche und unbedienbare Liste mit so gemischten Einträgen
Aber wenn du meinst es wäre Sinnvoll - warum zeigst du nicht deinen genialen Lösungsvorschlag für die über 30 Einträge
Aber eben nicht alles in eine unübersichtliche und unbedienbare Liste mit so gemischten Einträgen
Eben. Und genau das war die Antwort, die FaTech gegeben hat. Und genau auf diese Antwort hast du erwiedert "Was für einen Unsinn. Das macht man mit HTML5".
JA mit HTML5
JS ist da nicht notwendig
JS wäre ja nur notwendig wenn man alles in eine Liste quetschen wollte
JS wäre ja nur notwendig wenn man alles in eine Liste quetschen wollte
Richtig. Und genau das war die Antwort, die FaTech gegeben hat und der du bisher widersprochen hast. Danke, dass du ihm jetzt auch zustimmst.
Ich stimme ja nicht zu alles in eine Liste zu quetschen wollen und etwas zu missbrauchen wofür es nicht gedacht ist.
Der FS wäre mit dieser Lösung nicht glücklich
Danke, dass du ihm jetzt auch zustimmst.
Egal was du behauptest.
Dies wäre keine benutzbare Lösung.
Die einfache und benutzbare Lösung wäre bereits mit HTML5 und ohne JS machbar 😉
Aber gerne kannst du ja deine geniale Lösung für die 30 Optionen zusätzlich zu den Selektionen halbwegs bedienbar zeigt
HTML konforme und User freundliche uns verständliche Bedienung kann ich mit mit diesem Vorschlag nicht vorstellen.
Ich wüsste nicht wie du vernünftig die Selektionen von den Optionen unterscheiden wolltest und vor alles dann noch wartbar wenn neue Auswahlmöglichkeiten dazu kommen
Aber scheinbar hast du ja eine machbare Idee die ich aktuell nicht sehe
Aber gerne kannst du ja deine geniale Lösung für die 30 Optionen zusätzlich zu den Selektionen halbwegs bedienbar zeigt
Es gibt dafür keine Lösung. Schon gar keine geniale Lösung. Das ist nicht sinnvoll realisierbar. ES GEHT NICHT. ES GIBT KEINE MÖGLICHKEIT DAS GUT ZU MACHEN. WEDER MIT NOCH OHNE HTML. Die einzige Möglichkeit dafür wäre eine Lösung, die JS erfordert. Das wäre aber immer noch keine gute Lösung. Weil eine gute Lösung weder mit noch ohne Javascript realisierbar ist. Man kann das nicht mit HTML umsetzen. Weder gut noch schlecht.
Und es gäbe eine schlechte Lösung. Diese schlechte Lösung wäre schlecht. Völlig ungenial. Sie wäre wirklich schlecht. Aber man könnte sie mit JS umsetzen. Was nichts daran ändert dass sie schlecht ist. Und diese schlechte Lösung erfordert eben JS. Genau das sagte der User FaTech in seiner Antwort.
Er sagte, wenn der FS diese schlechte Lösung will, müsste er das mit JavaScript lösen. Daraufhin du: "Was für einen Unsinn. Das macht man mit HTML5"
ES GIBT KEINE MÖGLICHKEIT DAS GUT ZU MACHEN. WEDER MIT NOCH OHNE HTML.
Wieso
Es gibt mit HTML5 durchaus Möglichkeiten diese Aufgabe gut umzusetzen und bedienbar zu machen
Mit JS etwas zusammenzubasteln wäre unsinnig und schlechte Lösung.
Da sind wir uns ja endlich mal einig👍
Mit JS etwas zusammenzubasteln wäre unsinnig und schlechte Lösung.
Und 17 ist eine größere Zahl als 15. Aber danach war nicht gefragt.
Ist das irgendwie machbar?
Das würde eine katastrophal schlechte Usability bedeuten. Du könntest aber mit dem onselect Event abfragen wie viele season bereits angeklickt wurden.
Aber ich rate dir dringend, das anders umzusetzen.
Alex
Das wieviel nei 30 Möglichkeiten ist ja eigentlich nicht das Problem
Das Problem ist dass er eine ganz gemischte Liste machen möchte
Manche 1 aus x
Manche Optionen
Sicherlich viele der 30 Optionen auch nicht für jede Selection gültig.
Deshalb unbedingt nicht in eine unbedienbare Liste sondern gruppieren und jeweils nur die gültigen Optionen per PHP anzeigen lassen wenn er nicht alle 30 gleichzeitig anzeigen möchte.
Einfach nur mit HTML
Select button für die 1 aus X Auswahl
Und Checkbox für die einzelnen Optionen oder 2. select Gruppe
Je nach Aufgabenstellung
Hi und danke für deine Rückmeldung. Bin gerade deinem link gefolgt. An sich glaube ich eine gute idee. Allerdings werden es am ende so ca 30 tags, was glaube ich mit ankreuzen auch keine gute lösung ist. Ich selber kann leider kein javascript, war bisher nur backend unterwegs mit Python, PHP und bissel C++. Daher auch die frage mit HTML :) Was würdest du bei so vielen Tags machen oder wie würdest du es machen? Kann man vllt irgendwie multiple select mit suchen machen, gibt es dazu schon einen code im Internet den ich mir anschauenkann und nur überarbeiten muss, das könnte ich schaffen :) VG