Zmiana widoczności formularzy w zależności od wybranej opcji

Question

Tworzę formularz badawczy, który będzie wyświetlany inaczej, w zależności od wyboru wartości SELECT. Po przeszukaniu zastosowałem kilka sztuczek jQuery. Niestety, to w ogóle nie działa. Tu jest mój kodu:

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

Spróbuj jeden

$(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

A @ guradio sugeruje, kod działa poprawnie w skrzypcach. Aby rozwiązać problem, spróbuj umieścić alert lub console.log(), aby dowiedzieć się, że problem. Mam nadzieję, że biblioteka jQuery została dodana do twojej strony.

Spróbuj tych:

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

Answer 3

Twój kod działa, myślę, że brakuje biblioteki zapytań j na formularzu. proszę dodać.

zobaczyć jsfiddle.net/f5xuc0gh/