Question

我正在尝试使用jQuery创建一个下拉表，其中包含类似的代码:(来自主题：Conditional simple drop down list?）

<body>
<div id="myQuestions">
    <select id="QuestionOptions">
        <option value="A">Question A</option>
        <option value="B">Question B</option>
    </select>
</div>
<div id="myAnswers">
    <div id="A" style="display: none;">
        <div id="QuestionC">
            <p>Here is an example question C.</p>
        </div>
        <div id="QuestionD">
            <select id="QuestionOptionsD">
                <option value="G">Question G</option>
                <option value="H">Question H</option>
            </select>
        </div>
    </div>
    <div id="B" style="display: none;">
        <div id="QuestionE">
            <p>Here is an example question E.</p>
        </div>
        <div id="QuestionF">
            <select id="QuestionOptionsF">
                <option value="I">Question I</option>
                <option value="J">Question J</option>
            </select>
        </div>
    </div>
</div>

和jQuery部分

$(function () {
$('#QuestionOptions').change(function () {
    $('#myAnswers > div').hide();
    $('#myAnswers').find('#' + $(this).val()).show();
});
});

我的问题是，当我完成“myQuestions”的部分表，并开始表示“myAnswers”的部分时，表的动态部分不起作用。在这种情况下，myAnswers部分将不会被隐藏，它将从头开始显示。我试图将所有内容放在一个表中，然后我尝试为myQuestions创建一个不同的表，然后为myAnswers创建另一个表，但它不起作用。有谁知道我错在哪里？

Answer 1

如果不知道表格的新结构，很难回答，但无论如何this你想要什么？

HTML

<table id="myQuestions">
    <tr>
        <td>
            <select id="QuestionOptions">
                <option value="A">Question A</option>
                <option value="B">Question B</option>
            </select>
        </td>
    </tr>
</table>
<table id="myAnswers">
    <tr id="A" style="display: none;">
        <td id="QuestionC">
            <p>Here is an example question C.</p>
        </td>
        <td id="QuestionD">
            <select id="QuestionOptionsD">
                <option value="G">Question G</option>
                <option value="H">Question H</option>
            </select>
        </td>
    </tr>
    <tr id="B" style="display: none;">
        <td id="QuestionE">
            <p>Here is an example question E.</p>
        </td>
        <td id="QuestionF">
            <select id="QuestionOptionsF">
                <option value="I">Question I</option>
                <option value="J">Question J</option>
            </select>
        </td>
    </tr>
</table>

的Javascript

$(function() {
    $('#QuestionOptions').change(function() {
        $('tr', '#myAnswers').hide();
        $('#myAnswers').find('#' + $(this).val()).show();
    });
});

Answer 2

<div id="parTable">
<div id="myQuestions">
    <select id="QuestionOptions">
        <option value="A">Question A</option>
        <option value="B">Question B</option>
    </select>
</div>
<div id="myAnswers">
    <div id="A" style="display: none;">
        <div id="QuestionC">
            <p>Here is an example question C.</p>
        </div>
        <div id="QuestionD">
            <select id="QuestionOptionsD">
                <option value="G">Question G</option>
                <option value="H">Question H</option>
            </select>
        </div>
    </div>
    <div id="B" style="display: none;">
        <div id="QuestionE">
            <p>Here is an example question E.</p>
        </div>
        <div id="QuestionF">
            <select id="QuestionOptionsF">
                <option value="I">Question I</option>
                <option value="J">Question J</option>
            </select>
        </div>
    </div>
 </div>
</div>

$(function () {
$('#QuestionOptions').change(function () {
    $('#myAnswers').find('#' + $(this).val()).toggle();
});
});

下拉表和jquery

2 个答案: