JavaScript - <select> andere <option> ausgrauen?
Hallo zusammen,
brauche nochmal einen Denkanstoß :)
Ich habe zwei Mal <select></select>, die sozusagen in Reihe funktionieren sollen. Wenn ich jetzt beim ersten select eine Option auswähle, soll die eine option bei der zweiten select disable=disabled werden.
Zur Vorstellung:
<select>
<option value="nike">Nike</option>
<option value="reebok">Reebok</option>
</select>
<select>
<option value="sneaker">Sneaker</option>
<option value="fußballschuhe">Fußballschuhe</option>
</select>
-> bei dem Beispiel soll z.B. bei der Auswahl "Nike" im ersten, beim zweiten beide optionen angezeigt werden. Wähle ich hingegen "Reebok" aus, soll im zweiten Select nur die Auswahl "Sneaker" gemacht werden können, also "Fußballschuhe" ausgeschaltet.
Wie gehe ich da vor? Mit den Ansätzen aus dem Internet komme ich noch nicht weiter, dafür ist mein Know-How nicht groß genug. :)
Vielen Dank!
Gruß
2 Antworten
Wie gehe ich da vor?
du setzt einen onchange Eventhandler auf das erste select:
<select onchange="disable(this.value)">
In der JS Funktion disable() fragst du den übergebenen Wert ab und graust die gewünschten <option> Elemente aus
Alex
Wenn ich zur späteren Zeit weitere options einfüge, wie verhält es sich da?
exakt gleich. Das Prinzip ist so, dass immer bei der Auswahl eines Herstellers eine Funktion aufgerufen wird, an die der Herstellername mittels this.value() übergeben wird.
Und innerhalb der Funktion entscheidest du dann, welche Felder ausgegraut werden:
function disable(Hersteller)
{
if(Hersteller == 'Adidas') ...
if(Hersteller == 'Nike') ...
if(Hersteller == 'Puma') ...
}
Nochmal eine kleine Frage dazu: ausgrauen würde ich ja mit dem disabled="disabled" im HTML option-tag. Das müsste dann in der Funktion ja so ablaufen, dass ich das mit z.B. setAttribute() einfüge, oder? Muss mich da ein bisschen entlang arbeiten, bin wie gesagt noch recht frisch dabei. Danke dir für die ausführliche Hilfe!
ich habe jetzt folgendes mit eingebaut:
function disable(Hersteller) {
let sport = document.getElementById("sport");
if(Hersteller == 'Nike'){
console.log('Das ist ein Nike Schuh') // nur so
sport.setAttribute("disabled", "disabled");
}}
Das funktioniert auch, aber dann zeigt er mir das Feld "Sport" was in dem Falle jetzt zum Beispiel "Fußballschuh" wäre, ausgegraut an. Er setzt den value ja für immer. Möchte ja aber, dass es nur an Nike geknüpft ist, bzw. an Reebok z.B.
Wo ist mein Fehler?
okay, ich habe nachgedacht und es selber gecheckt. :D Wie gut, dass gutefrage mich nicht als Spammer sieht, aber ich musste das jetzt ja nochmal beantworten. Ich habe, so wie du es ja gesagt hast, ein weiteres if hinzugefügt und das Attribut einfach wieder gelöscht, wenn man den anderen Hersteller ausgewählt hat. :P
ein weiteres if hinzugefügt
Musst du nicht. Es genügt, wenn die erste Anweisung innerhalb der Funktion alle disabled Felder zunächst enabled. Und erst danach wird je nach Hersteller ausgegraut.
Zur Nutzerfreundlichkeit würde ich hier eher auf das entfernen der Option setzen. Es gibt viele Personen, die keine Ahnung von sowas haben und die kennen den Unterschied zwischen disabled und enabled nicht. Da sollte man am besten direkt Vorkehrungen treffen und bei Auswahl von 1, die Auswahl in 2 komplett überarbeiten, dass dort andere Optionen sind, aber nichts disabled
man will aber vieleicht trotzdem dass der Nutzer weiß dass es das ganze gibt, eben nur nicht verfügbar ist. Ausgrauen/disablen sollte jeder kennen
An sich verstehe ich, was du meinst. Ich würde es auch gerne anzeigen lassen. Habt ihr denn einen Ansatz, wie man da vorgeht? :)
Hi Alex, danke dir.
Wenn ich zur späteren Zeit weitere options einfüge, wie verhält es sich da? Vom Prinzip soll es dann ja gleich bleiben: manche Marken haben Fußballschuhe, manche nicht und die sollen dann ausgegraut werden.
Danke nochmal. :-)