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();
});
});

DEMO here

Answer 2

@guradio建议，代码在小提琴中运行良好。要调试此问题，请尝试alert或console.log()知道问题。希望您的页面中添加了jQuery库。

试试这些：

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

Answer 3

您的代码正常运行，我认为您在表单上缺少j查询库。请添加。

请参阅jsfiddle.net/f5xuc0gh/

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

3 个答案: