Modifica della visibilità dei moduli in base all'opzione scelta

Question

Sto creando un modulo di ricerca che verrà visualizzato in modo diverso a seconda della scelta di un valore SELECT. Ho applicato alcuni trucchi jQuery dopo aver cercato qui. Sfortunatamente, non funziona affatto. Ecco il mio codice:

HTML:

<select name="options" id="choice"> 
    <option value="0" selected="true">Choose...</option> 
    <optgroup label='ABC'> 
     <option value="1">...DEF</option> 
     <option value="2">...GHL</option> 
    </optgroup> 
    <optgroup label="MNP:"> 
     <option value="3">X</option> 
     <option value="4">Y</option> 
     <option value="5">Z</option> 
    </optgroup> 
</select> 
<form id="opt1" name="opt1" style="display: none">11111111</form> 
<form id="opt2" name="opt2" style="display: none">22222222</form> 
<form id="opt3" name="opt3" style="display: none">33333333</form> 
<form id="opt4" name="opt4" style="display: none">44444444</form> 
<form id="opt5" name="opt5" style="display: none">55555555</form> 

JavaScript:

$("#choice").change(function() { 
    $("form").hide(); 
    $("#opt" + $(this).val()).show(); 
}); 

Answer 1

provare questo

$(document).ready(function(){ 
$('select').change(function() { 
    //var selected = $(':selected', this); 
    //alert(selected.closest('optgroup').attr('label')); 
    $("form").hide(); 
    $("#opt" + $(this).val()).show(); 
}); 
}); 

DEMO here

Answer 2

Un suggerimento @ guradio, il codice funziona bene in fiddle. Per eseguire il debug del problema prova a inserire alert s o console.log() per sapere che il problema è stato risolto. Spero tu abbia la libreria jQuery aggiunta alla tua pagina.

provare questi:

$("#choice").change(function() { 
    alert('fine till here'); 
    $("form").hide(); 
    $("#opt" + $(this).val()).show(); 
}); 

Answer 3

Il codice funziona, penso che vi manca libreria di query j sulla forma. per favore Aggiungi.

vedere jsfiddle.net/f5xuc0gh/