Frage [css] Reaktion auf Options-value

[colaholiker]

Auf ein gutes Neues!

Ich erstelle gerade eine Webseite mit Einstelloptionen.
Problemfall: programmieren eines Buttons:
ich versuche ein verstecktes Textfeld sichtbar zu machen indem ich ein Value im Button-Optionsfeld auswähle.

Hier die relevanten Ausschnitte:

HTML:

    <div class="inputs-006a">
        <label for="BtnOpt">Taste: </label>
        <select id="BtnOpt"  name="settings-e-006">
            <option value="ein/aus">ein/aus</option>
            <option value="Anz_e/a">Anz e/a</option>
            <option value="Reset">Reset</option>
            <option value="loggen">loggen</option>
            <option id="MQTTOpt" value="sendMQTT">send MQTT</option>
            <option value="passiv">passiv</option>
        </select>
    </div>
<div class="btnSendBefehl">
    <p>Test für das Textfeld</p>
</div>

css:

.btnSendBefehl {
    visibility: false;
}
select[id="BtnOpt", value=send MQTT].btnSendBefehl {
  visibility: visible;
}

Diese Syntax ist wohl falsch?
Ich hatte auch getestet, der Option eine ID zu geben (s.Code) und diese abzufragen, auch ohne Erfolg.
Wie macht man das richtig?
-vielen Dank-

 

[Sempervivum]

Danke, ich wünsche ebenfalls ein frohes Neues!

Mit deinem Attributselektor bist Du schon relativ nah dran, nur die Verkettung funktioniert etwas anders:

select[id="BtnOpt"] option[value="sendMQTT"]

was Du dann noch vereinfachen kannst zu:

select#BtnOpt option[value="sendMQTT"]

So weit, so gut, aber Du wirst dann von einer anderen Einschränkung von CSS ausgebremst: Um das Textfeld ansprechen zu können, müsstest Du zunächst im Baum hinauf gehen, so wie es im Dateisystem durch ../ möglich ist. In CSS geht das jedoch nicht. Man kann generell vieles mit Vorteil durch CSS erledigen aber in diesem Fall wirst Du mit den Grenzen konfrontiert.
Also diese Aufgabe einfach mit JS erledigen.

 

[colaholiker]

[mich korrigieren: visibility: hidden; muß es oben heißen]

Hi Sempervivum,
Hm, ich bekomme auch mit Deinem Code keine Reaktion. Außerdem muß wohl ".btnSendBefehl" als erstes kommen, etwa so:

.btnSendBefehl:select#BtnOpt option[value="sendMQTT"] {

Leider bringt das auch nichts.

Dann werde ich wohl js nutzen...

 

[Sempervivum]

Das sollte auch keine funktionierende Lösung sein sondern nur eine Demo wie die Syntax für solche Attributselektoren lautet. Siehe meinen Text darunter.

 

[colaholiker]

Siehe meinen Text darunter.

Ah, den hab ich auf das 'Betreiben' der Textbox bezogen, Du meintest das Schalten mit css. Das geht also nur in eine Richtung...