[JS] Event bij bepaalde selectie dropdown box optie

[Millennyum]

Ik heb een dropdown box en ik wil dat er een div zichtbaar wordt wanneer een bepaalde optie geselecteerd wordt. Bij alle andere opties moet de div onzichtbaar blijven/worden.

Ik heb al diverse javascriptjes in elkaar geprutst, maar het resultaat is keer op keer dat de div zichtbaar wordt ongeacht welke optie er geselecteerd wordt.

Dit heb ik al geprobeerd:


De algemene code:

HTML:

<form name="atomzsearchform" method="get" action="url">
<select name="sp_k" onchange="Check_for_Forum();">
                <option value="">All of Lennys Alice in Wonderland site</option>
                <option value="Topic index">Topic index</option>
                <option value="Webshop">Shop</option>
                <option value="Forum">Forum</option>
                <option value="Book chapters (useful for finding quotes)">Book chapters (useful for finding quotes)</option>
                </select>

<div id="forumsearch" style="visibility:hidden;">Blaat</div>

in combinatie met een van de volgende scriptjes:

JavaScript:

function Check_for_Forum(){
 if (document.atomzsearchform.sp_k.options[3]) {document.getElementById('forumsearch').style.visibility="visible";}
 else {document.getElementById('forumsearch').style.visibility="hidden";}
}

JavaScript:

function Check_for_Forum(){
 len = document.atomzsearchform.sp_k.length
i = 0
chosen = "none"

for (i = 0; i < len; i++) {
if (document.atomzsearchform.sp_k[i].selected) {
chosen = document.atomzsearchform.sp_k[i].value
}
}
if (chosen = "Forum") {document.getElementById('forumsearch').style.visibility="visible";}
 else {document.getElementById('forumsearch').style.visibility="hidden";}

}

JavaScript:

function Check_for_Forum(){
 var selnr = document.atomzsearchform.sp_k.selectedIndex;
 var selected_text = document.atomzsearchform.sp_k.options[selnr].text;
  if (selected_text = "Forum")
  {document.getElementById('forumsearch').style.visibility="visible";}
 else {document.getElementById('forumsearch').style.visibility="hidden";}
}

JavaScript:

function Check_for_Forum(){
 if (document.atomzsearchform.sp_k.options[document.atomzsearchform.sp_k.selectedIndex].value = "Forum") {document.getElementById('forumsearch').style.visibility="visible";}
 else {document.getElementById('forumsearch').style.visibility="hidden";}
}

Wie vertelt me wat ik fout doe?

[XWB]

HTML:

<form name="atomzsearchform" method="get" action="url">
<select name="sp_k" onchange="Check_for_Forum ( this );">
                <option value="">All of Lennys Alice in Wonderland site</option>
                <option value="Topic index">Topic index</option>
                <option value="Webshop">Shop</option>
                <option value="Forum">Forum</option>
                <option value="Book chapters (useful for finding quotes)">Book chapters (useful for finding quotes)</option>
                </select>

<div id="forumsearch" style="display: hidden;">Blaat</div>

JavaScript:

function Check_for_Forum ( selectElement )
{
    if ( selectElement.selectedIndex == 3 )
        document.getElementById('forumsearch').style.display = 'block';
    else
        document.getElementById('forumsearch').style.display = 'hidden';
}

[Millennyum]

U is super!!

Ik zie ook nu pas dat ik overal '=' in plaats van '==' heb gebruikt...

Het werkt overigens niet met 'display:hidden', wel display:none

[ Voor 53% gewijzigd door Millennyum op 04-05-2008 20:20 ]

[newpegasus]

Misschien niet helemaal een antwoord op je vraag, maar dergelijke zaken zijn erg goed te doen met de Javascript library JQuery (www.jquery.com).

Gewoon zo bijvoorbeeld: $("#contentDiv").show() voor het tonen van een divje. Zo kun je ook events enzo doen. Erg handig!

[XWB]

Millennyum schreef op zondag 04 mei 2008 @ 20:11:
U is super!!
Het werkt overigens niet met 'display:hidden', wel display:none

Klopt, het moet none zijn

[Borizz]

newpegasus schreef op zondag 04 mei 2008 @ 20:16:
Misschien niet helemaal een antwoord op je vraag, maar dergelijke zaken zijn erg goed te doen met de Javascript library JQuery (www.jquery.com).

Gewoon zo bijvoorbeeld: $("#contentDiv").show() voor het tonen van een divje. Zo kun je ook events enzo doen. Erg handig!

Het lijkt wel of er tegenwoordig niemand meer weet hoe javascript werkt zonder libraries. Voor het tonen / verbergen van een element heb je echt geen compleet javascript library nodig hoor.

[newpegasus]

Borizz schreef op zondag 04 mei 2008 @ 23:48:
[...]

Het lijkt wel of er tegenwoordig niemand meer weet hoe javascript werkt zonder libraries. Voor het tonen / verbergen van een element heb je echt geen compleet javascript library nodig hoor.

Ik ben met je eens dat deze library misschien overkill is voor het tonen of verbergen van een element, maar met oog op 'cross-browser proof'-ness en foutgevoeligheid is Jquery wel een uitkomst. Ook wanneer de TS in de toekomst uit gaat breiden met ingewikkeldere functionaliteit, biedt deze library veel houvast. Daarnaast is debuggen van Javascript opeens een stuk beter te doen omdat je betere foutmeldingen ontvangt.

Just my 2 cents