jQuery表單 - 多條路線

我有一個窗體分成2個步驟。步驟2有兩個不同的字段集，具體取決於第一步中選擇的選項。所以你有第1步，然後第2a和2b步。我無法弄清楚如何從下拉菜單中拉取數值，然後使用它進行步驟2a或2b。這是我的HTML：jQuery表單 - 多條路線

<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/

來源

2012-08-08 ejwgrant