jquery - jQuery フォーム - 複数のルート

Question

2 つのステップに分割されたフォームがあります。ステップ 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/