jquery toon verberg optie form

[klaaspeter]

Ik heb een form en daarin moeten gebruikers keuze maken aan de hand van de keuze wordt er een nieuw gedeelte getoond.

Wat gaat er fout:

Op het moment dat ik mijn keuze maak in mijn form dan opent hij het nieuwe gedeelte maar verbergt het ook meteen. Alleen optie 4 daarbij wordt het wel getoont. Ik wil graag steeds het zelfde gedeelte aanroepen maar dat doet die juist moeilijk. Verander ik dit en voeg ik steeds het zelfde gedeelte toe maar verander ik de naam dan werkt het perfect, mijn lijkt dat dit niet nodig zou moeten zijn dat ik 4 keer het zelfde gedeelte moet toevoegen.

Hoop dat iemand mij hiermee kan helpen.

Even een gedeelte van de code.

[JS]$("#select1").change(function(){

if ($(this).val() == "optie1" ) {

$("#lessenbezoeken").slideDown("fast"); //Slide Down Effect

} else {

$("#lessenbezoeken").slideUp("fast"); //Slide Up Effect

}
});

$("#select1").change(function(){

if ($(this).val() == "optie2" ) {

$("#lessenbezoeken").slideDown("fast"); //Slide Down Effect

} else {

$("#lessenbezoeken").slideUp("fast"); //Slide Up Effect

}
});

$("#select1").change(function(){

if ($(this).val() == "optie3" ) {

$("#lessenbezoeken").slideDown("fast"); //Slide Down Effect

} else {

$("#lessenbezoeken").slideUp("fast"); //Slide Up Effect

}
});

$("#select1").change(function(){

if ($(this).val() == "optie4" ) {

$("#lessenbezoeken").slideDown("fast"); //Slide Down Effect

} else {

$("#lessenbezoeken").slideUp("fast"); //Slide Up Effect

}
});[/JS]

en een mijn form:

  <div>Gegevens</div>
       <labelMaak uw keuze</label>
       <select name="select1" id="select1"> 
       <option value="">Selecteer...</option> 
	   <option value="optie1">optie1</option> 
	   <option value="optie2">optie2</option>
       <option value="optie3">optie3</option> 
	   <option value="optie4">optie4</option> 
       <option value="Overig">Overig</option> 
       </select>
       <br>
       		
       <div class="hide" id="hide1" >
       Stel hier uw vraag of plaats uw verzoek.<br />
       <label></label>
       <textarea maxlength="200"></textarea>
       <br>
       </div>
       
       <div id="lessenbezoeken" class="hide">
       <label>Aantal bezoeken</label>
       <select><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select>
       </div>

 

[mark199]

De change functie wordt vier keer uitgevoerd op deze manier. Als je optie 1 selecteert is wordt hij in functie 1 getoond en in functie 2,3 en 4 weer verborgen. Daarom werkt het ook alleen goed bij optie 4.

 

[klaaspeter]

Oke bedankt! Enig idee hoe ik dit het best kan aanpassen?

Moet het dan zo iets zijn?

[JS]
$("#select1").change(function(){

if ($(this).val() == "optie1","optie2", "optie3","optie4" ) {

$("#lessenbezoeken").slideDown("fast"); //Slide Down Effect

} else {

$("#lessenbezoeken").slideUp("fast"); //Slide Up Effect

}
});

[/JS]

 

[mark199]

Ik denk dat dit m moet worden:

("#select1").change(function(){
             var selectedValue = $(this).val();
             if (selectedValue || selectedValue = 'Overig') {
                    $("#lessenbezoeken").slideUp("fast"); 
             } else {
                 $("#lessenbezoeken").slideDown("fast");                
            }
        });

 

[klaaspeter]

Bedankt!