Per JavaScript ein <select> "aufklappen" lassen
Felix Riesterer
Per JavaScript ein <select> "aufklappen" lassen
Felix Riesterer
Rolf bLiebe Mitlesende,
gegeben sei folgendes Markup:
<label for="color">Lieblingsfarbe</label>
<select id="color" name="color">
<option value="#00ff00">grün</option>
<option value="#ff0000">rot</option>
<option value="#0000ff">blau</option>
</select>
Wie kann ich per JavaScript erreichen, dass das select-Element für den Benutzer aufgeklappt wird? Auf Touch-Geräten wird dem Benutzer in solchen Momenten vom System eine Liste mit den möglichen Optionen in einer leichter bedienbaren Darstellung angeboten, was aber nicht der Fall ist, wenn man auf das label-Element tippt. Diesen Effekt möchte ich aber per JS auslösen, damit es egal ist, ob man auf das label oder das select getippt hat.
Die click-Methode des select-Elements löst diesen Effekt offensichtlich nicht aus. [Fiddle]
Wer weiß Rat?
Liebe Grüße,
Felix Riesterer.
-
Bin gerade grundsatzverwirrt. Ein alert("Huhu"), vor oder hinter dem document.addEventListener, wird angezeigt. Verschiebe ich es in die Listener-Funktion, erscheint es nicht. Selbst dann, wenn ich den Rest der Listener-Funktion entferne. Das Event wird nicht ausgelöst? Die Schreibweise ist ja nun offenbar richtig.
-
Lieber Rolf,
Bin gerade grundsatzverwirrt. Ein alert("Huhu"), vor oder hinter dem document.addEventListener, wird angezeigt.
das auslösende Event findet also statt.
Verschiebe ich es in die Listener-Funktion, erscheint es nicht. Selbst dann, wenn ich den Rest der Listener-Funktion entferne.
Das click-Event löst Du aus, indem Du auf den Inhalt des
label-Elements klickst?Das Event wird nicht ausgelöst?
Offensichtlich.
Die Schreibweise ist ja nun offenbar richtig.
Sonst hättest Du eine Meldung in der Konsole.
Liebe Grüße,
Felix Riesterer.
-
Äh Felix, da hast Du mich jetzt komplett mistverstanden.
Ein alert(), der vor oder hinter document.addEventListener steht, läuft nicht im Event Handler. Ich meine dies:
alert("huhu1"); document.addEventListener("DOMContentLoaded", function() { alert("huhu2"); }); alert("huhu3");Beim Aufruf der Seite sollten alle 3 Huhus kommen, in der Reihenfolge 1, 3, 2. Es kommen aber nur 1 und 3. Und weil Huhu2 nicht kommt, wird dein Initialisierungscode nicht durchgeführt.
Jetzt ist mir aber auch klar, warum das so ist. Das JavaScript von JSFiddle wird in body.loaded ausgeführt, und dann ist DOMContentLoaded schon lange vorbei. Die gute Nachricht ist: JSFiddle tut für dich ohnehin, was Du selbst tun wolltest, d.h. du kannst dein JavaScript auf den Inhalt der Funktion reduzieren, die du im Eventhandler laufen lässt.
Du müsstest dann auch noch deinen Selector für querySelectorAll modifizieren, im Fiddle ist keine Table und darum ist td:first-child nicht ganz angebracht :)
Ändert nur alles nichts am Sachverhalt: Selects kann man nicht per Script aufklappen. Weil das scheinbar nicht gewollt ist. Bedanke Dich bei all den Hackern, die Mist mit JavaScript gemacht haben...
Rolf
-
Lieber Rolf,
Du müsstest dann auch noch deinen Selector für querySelectorAll modifizieren, im Fiddle ist keine Table und darum ist td:first-child nicht ganz angebracht :)
[x] done - war eine fehlende Anpassung bei der Vereinfachung des Beispiels.
Ändert nur alles nichts am Sachverhalt: Selects kann man nicht per Script aufklappen. Weil das scheinbar nicht gewollt ist. Bedanke Dich bei all den Hackern, die Mist mit JavaScript gemacht haben...
Das ist es wohl... Schade!
Liebe Grüße,
Felix Riesterer.
-
-
-
-
Was auch immer es mit dem DOMContentLoaded auf sich hat - stackoverflow sagt, dein Problem sei nicht lösbar. Es gibt wohl Tricks mit dem size-Property des Select, aber das dürfte im Mobilbereich nicht das tun was Du möchtest.
Rolf
-
Lieber Rolf,
Was auch immer es mit dem DOMContentLoaded auf sich hat -
es sorgt dafür, dass der Code in der Funktion erst (oder gar schon) dann ausgeführt wird, wenn das HTML-Dokument komplett geladen worden ist.
stackoverflow sagt, dein Problem sei nicht lösbar.
Vielen Dank für den Link. Der ist mir noch nicht aufgefallen. Werde das aber studieren.
Es gibt wohl Tricks mit dem size-Property des Select, aber das dürfte im Mobilbereich nicht das tun was Du möchtest.
Korrekt. Sei's d'rum. Es geht auch ohne - es wäre nur eine schöne Erleichterung für die Bedienbarkeit gewesen.
Liebe Grüße,
Felix Riesterer.
-
-
Hallo Felix,
mit dem Eventhandler das size-Attribut des Selects ändern; funtioniert zwar, fühlt sich aber nach Holzhammermethode an.
Grüße Martl
-
Fühlt sich nicht nur so an, sondern sieht auch so aus ;)
Sprich: Die Optik ist eine andere als wenn man es aufklappt.
-
Hallo Rolf,
damit ist wenigsten bewiesen, daß der Satz "Form follows function" durchaus wörtlich zu nehmen ist.
Grüße Martl
-
-
-
Hallo
gegeben sei folgendes Markup:
Warum überhaupt dieses benutzerunfreundliche barriereaufbauende Markup? Checkboxen oder Radiobuttons sind deutlich besser geeignet die Besucher zum Ausfüllen zu animieren.
Gruss
MrMurphy
-
Lieber MrMurphy1,
Warum überhaupt dieses benutzerunfreundliche barriereaufbauende Markup?
das Beispiel ist sehr stark vereinfacht worden, um das grundsätzliche technische Problem zu beschreiben. In Wirklichkeit habe ich eine Liste zwischen 20 und 30 "Lieblingsfarben", bei denen von jeweils 21 Werten (plus einem leeren Wert als Voreinstellung) genau ein Wert ausgesucht werden soll.
Checkboxen oder Radiobuttons sind deutlich besser geeignet die Besucher zum Ausfüllen zu animieren.
Das Beispiel ist bewusst um den tieferen Sinn der Webapplikation reduziert worden, daher kannst Du nicht wissen, was meine "Besucher" warum tun sollten oder gar wollten. Das nehme ich inkauf.
Liebe Grüße,
Felix Riesterer.
-
Hallo
Ich weiß was alle Besucher an Webseiten nervt, auch deine. Dazu gehören unter anderem, aber ganz oben auf der Liste, Zeitdiebstahl, unnötige Klicks, unnötiges Scrollen, unnötiges Plazieren des Mauszeigers, Unübersichtlichkeit. Also genau das, womit du deine Besucher quälst.
Das nehme ich inkauf.
Hä? Nein, du verlangst, dass deine Besucher dass in Kauf nehmen.
Gruss
MrMurphy
-
Lieber MrMurphy1,
Ich weiß was alle Besucher an Webseiten nervt, auch deine.
meine? An die sollte ich mich tatsächlich wieder einmal machen. Da hast Du wirklich recht.
Also genau das, womit du deine Besucher quälst.
Das Teil wird eine Web-Anwendung in einer Art Intranet. Meine "Besucher" sind eher sowas wie Mitarbeiter. Es geht um das händische Erfassen von Daten. Für eine bequemere Eingabemöglichkeit gibt es ein JavaScript, welches Tastatureingaben abfängt, um die
select-Optionen einfacher und schneller auszuwählen - wenn man eine richtige Tastatur hat. Auf Touch-Geräten braucht es eben einen anderen Weg, damit die Eingabe dieser Mengen an Daten zuverläsig gelingt. Deshalb dieser Ansatz.Liebe Grüße,
Felix Riesterer.
-
-
-
-
Hallo Felix,
noch ein Nachtrag zum Holzhammer:
Könnte brauchbar sein in Verbindung mit dem hier blog.kulturbanause.de beschriebenen Styling (Abschnitt: Select-Listen gestalten).
Grüße Martl