Aloha ;)
...und noch eine Alternative zu 2., die ohne Javascript auskommt, dafür aber eventuell das dynamische Zusammenstellen eines CSS-Dokuments (bspw. per PHP) benötigt (was besser ist, weil das die Problematik zu dir verschiebt und von deinen Nutzern fernhält):
Statt das verstecken mit Javascript zu lösen kannst du die Zusatz-Optionen alle initial mit CSS verstecken und dann mittels sibling selector und value-Attributwert nur das eine spezifisch benötigte sichtbar schalten.
Du musst auf HTML-Ebene natürlich dann sicherstellen, dass sich die Liste mit id liste und die Zusatzoptionen (wahrscheinlich je innerhalb eines Containers mit Klasse zusatzoption) innerhalb ein und desselben HTML-Elements befinden und, dass die Liste sich vor den Zusatzoptionen befindet (~
selektiert nur vorwärts), das ist aber ja sowieso die einzig sinnvolle Reihenfolge. Du brauchst hier php (o.ä.) um die css-Datei zu erzeugen, da du für jeden möglichen Listeneintrag eine eigene CSS-Regel benötigst. Mir fällt da auf die Schnelle keine einfache Automatisierung für ein, die ohne Präprozessor auskommt.
Den Ansatz muss ich leider (mindestens vorerst) zurücknehmen. Offenbar lässt sich value
mit dem Attributselektor nicht auslesen. Für Hinweise wieso das so ist wäre ich allerdings dankbar. (Liegt es daran, dass CSS nur HTML-Attribute frisst, die tatsächlich exakt so vorliegen, oder liegt es an select
?)
Grüße,
RIDER