Thay đổi mức hiển thị của biểu mẫu tùy thuộc vào tùy chọn đã chọn

Question

Tôi đang tạo biểu mẫu nghiên cứu sẽ hiển thị khác nhau tùy thuộc vào lựa chọn giá trị SELECT. Tôi đã áp dụng một số thủ thuật jQuery sau khi tìm kiếm thông qua đây. Thật không may, nó không hoạt động chút nào. Đây là mã của tôi:

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

Hãy thử một

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

DEMO này here

Answer 2

Một @guradio gợi ý, mã hoạt động tốt trong fiddle. Để gỡ lỗi vấn đề, hãy thử đặt alert s hoặc console.log() để biết rằng vấn đề xảy ra. Hy vọng bạn có thư viện jQuery được thêm vào trang của bạn.

Hãy thử những:

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

Answer 3

Mã của bạn đang làm việc, tôi nghĩ rằng bạn đang thiếu thư viện j truy vấn vào mẫu. Vui lòng thêm.

xem jsfiddle.net/f5xuc0gh/