jQuery 表单 - 多条路线

Question

我的表单分为两个步骤。步骤 2 有 2 个不同的字段集，具体取决于第一步中选择的选项。因此，您有步骤 1，然后是步骤 2a 和 2b。我不知道如何从下拉列表中提取值并使用它来进行步骤 2a 或 2b。这是我的 HTML:

<fieldset class="step1">
    <label>Options</label>
    <select class="mySelect">
        <option value="steb2a">Step 2a</option>
        <option value="steb2b">Step 2b</option>
    </select>
    <a class="nextStep">Next</a>
</fieldset>
<fieldset class="step2a">
    <label>Question 2a</label>
    <input type="text" />
</fieldset>
<fieldset class="step2b">
    <label>Question 2b</label>
    <input type="text" />
</fieldset>

这是我的 JavaScript:

$(document).ready(function () {
    $(".step2a").addClass("hidePanel");
    $(".step2b").addClass("hidePanel");
    $(".nextStep").click(function () {
        $(".step1").addClass("hidePanel");
        $('.mySelect').change(function () {
            if ($(this).val() == 'step2a') {
                $(".step2a").removeClass("hidePanel").addClass("showPanel");
            } else if ($(this).val() == 'step2b') {
                $(".step2b").removeClass("hidePanel").addClass("showPanel");
            }
        });         
    });
});

这对我来说看起来很合乎逻辑，但它不起作用，它隐藏了第一个字段集，但没有将“showPanel”类添加到下一个字段集。我是否犯了一个简单的错误，或者我的做法完全错误？任何帮助表示赞赏。我在这里创建了一个 jsfiddle:

http://jsfiddle.net/LTMzF/

Answer 1

这是我的示例 http://jsfiddle.net/fyU6N/