oncklick in <option> ???

[Sveno]

Hallo zusammen,

ich bekomme folgendes nicht zum laufen:

  
<select>  
 <option onclick="document.getElementById('demo').style.display = 'block'">anzeigen</option>  
 <option onclick="document.getElementById('demo').style.display = 'none'">verbergen</option>  
</select>  
  
<p id="demo" style="display:block;">Anzeige die ausgeblendet werden soll!</p>  

ich möchte wie oben zu sehen mit <option> und onclick ein Textfeld ausblenden, aber ich krieg es einfach nicht hin.

Viele Grüße

Sven

[Der Martin]

Hi,

<select>

<option onclick="document.getElementById('demo').style.display = 'block'">anzeigen</option>
<option onclick="document.getElementById('demo').style.display = 'none'">verbergen</option>
</select>

<p id="demo" style="display:block;">Anzeige die ausgeblendet werden soll!</p>

>   
> ich möchte wie oben zu sehen mit <option> und onclick ein Textfeld ausblenden, aber ich krieg es einfach nicht hin.  
  
AFAIK implementieren nicht alle Browser onclick für option-Elemente. Verwende stattdessen onselect im select-Element, das sollte auch browserübergreifend gehen.  
  
Ciao,  
 Martin  

-- 
Lieber eine Fliege im Porzellanladen  
als ein Elefant in der Suppe.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Verwende stattdessen onselect im select-Element

Bist du sicher, dass es ein select-Event gibt?

Qapla'

[Gunnar Bittersmann]

@@Sveno:

nuqneH

ich möchte wie oben zu sehen mit <option> und onclick ein Textfeld ausblenden, aber ich krieg es einfach nicht hin.

Im Firefox funktioniert’s. In Chrome nicht.

Stattdessen: Auf das change-Event des select-Elements reagieren und die Sichtbarkeit entsprechend seines value ändern. Dirty (nicht so machen!):

<select onchange="[code lang=javascript]document.getElementById('demo').style.display = (this.value == 'anzeigen') ? 'block' : 'none';">
    <option>anzeigen</option>
    <option>verbergen</option>
</select>[/code]

Da gibt es einiges zu verbessern:

(1) Man sollte keinen JavaScript-Code ins HTML schreiben, sondern Eventhandler in JavaScript definieren.

Im HTML steht lediglich

<select id="visibility-switcher">  
    <option value="visible">anzeigen</option>  
    <option value="hidden">verbergen</option>  
</select>

Im JavaScript:

var demoElement = document.getElementById("demo"),  
    visibilitySwitcherElement = document.getElementById("visibility-switcher");  
  
visibilitySwitcherElement.addEventListener("change", function (event)  
{  
    // dazu kommen wir gleich  
}, false);

(2) Man sollte mit JavaScript keine CSS-Eigenschaften ändern, sondern Informationen ins DOM bringen.

Man könnte dem demo-Element z.B. den Wert des select-Elements als Klasse verpassen:

visibilitySwitcherElement.addEventListener("change", function (event)  
{  
    demoElement.className = event.target.value;  
}, false);

Den Rest erledigt das Stylesheet:

.hidden  
{  
    display: none;  
}

(3) Man sollte Elemente nicht unbedingt mit display: none verstecken.

Also die Regel für .hidden doch etwas anders.

Qapla'

[Sveno]

oje...
damit hab ich nicht gerechnet... mit javascript hab ich noch nicht soviel Erfahrung.

Dann löse ich das doch anders.

Trotzdem danke für eure Antworten

[Gunnar Bittersmann]

@@Sveno:

nuqneH

Dann löse ich das doch anders.

Fürs Protokoll: Das hier ist wohl kein Fall von Fragende dort abholen, wo sie sind.

Hier will wohl jemand nicht abgeholt werden.

Qapla'

[Steel]

Moin!

Dann löse ich das doch anders.

Fürs Protokoll: Das hier ist wohl kein Fall von Fragende dort abholen, wo sie sind.

Ich war schon ganz verwirrt, dass Du hier quasi den kompletten Code lieferst. Schoen erklaert, wie ich finde.

[Sveno]

HöHö...
doch ich lasse mich gerne abholen, nur javascript ist für mich noch recht neu und da brauch ich etwas mehr Zeit um mich damit auseinanderzusetzen.
Ich werde deine Lösung am WE mal nachbauen, und dann auf meinen Anwendungsfall übertragen.

Viele Grüße