javascript - 根据所选选项更改表单的可见性

Question

我正在制作一个研究表格，该表格将根据选择的 SELECT 值以不同方式显示。在这里搜索后，我应用了一些 jQuery 技巧。不幸的是，它根本不起作用。这是我的代码:

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

试试这个

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

演示 here