jquery slideup/slidedown第二次不工作

Question

我想寫一個代碼，顯示基於選擇框顯示包含表單元素的div盒。我認爲解釋這個問題最簡單的方法就是舉一個例子。

http://jsfiddle.net/544rc/1/ 如果你看看這個小提琴。請嘗試以下操作：

首先選擇選項1，searchform 1出現..這是正確的。 選擇選項3，搜索表單1和2出現，這也是正確的 但現在，當您再次選擇選項1時。沒有窗體出現，它應該顯示搜索形式1.

我是一個菜鳥，當涉及到jQuery，所以如果我的腳本不像它那麼漂亮，你知道原因。

我的jQuery：

$(document).ready(function() { 
$("#select").change(function() { 

    var val = $(this).val(); 

    if (val == "value1" || val == "value2") { //check if value 1 or 2 are selected 

     $("#search2").slideDown("fast"); //Slide Down Effect 
     $("#search1").slideUp("fast"); 

    } else { 

     $("#search1").slideUp("fast"); //Slide Down Effect 
     $("#search1").slideUp("fast"); 

    } 

    $("#select").change(function() { 

     var val = $(this).val(); 

     if (val == "value3" || val == "value4" || val == "value5") { // check if value 3, 4 or 5 are selected 

      $("#search1").slideDown("fast"); //Slide Down Effect 
      $("#search2").slideDown("fast"); 

     } else { 

      $("#search1").slideUp("fast"); //Slide Down Effect 
      $("#search2").slideUp("fast"); 

     } 
    }); 
}); 

}）;

HTML：

<form id="indexsearch" method="post" action="#"> <!-- searchform --> 
     <div class="soortselect"> 
      <label for="select">Ik zoek:</label> 
      <select name="select" id="select" > <!-- select box --> 
       <option value="">(choice)</option> 
       <option value="value1">option 1</option> 
       <option value="value2">option 2</option> 
       <option value="value3">option 3</option> 
       <option value="value4">option 4</option> 
       <option value="value5">option 5</option> 
      </select> 
     </div> 

     <div class="hide" id="search1"> <!--hidden search form 1 --> 
      <div class="soortselect"> 
       <label for="edu">Opleiding</label> 
        <input name="edu" type="text" id="edu" ><br /> 
      </div> 
     </div> 

     <div class="hide" id="search2"> <!-- hidden search form 2 --> 
      <div class="soortselect"> 
       <label for="postal">Postcode</label> 
        <input name="postal" type="text" id="postal"><br /> 
       <label for="name">Name</label> 
        <input name="name" type="text" id="name"><br /> 
        <input name="vind2" type="submit" id="vind" value="Vind!"> 
      </div> 
     </div> 
    </form> 

任何想法？

Answer 1

試試這個的jsfiddle：http://jsfiddle.net/544rc/4/

基於我所看到的，你只需要添加一個else if語句可（檢查值3,4,5）。

如果再次選擇(choice)，我又添加了另一個其他項。

下面是更新後的Javascript：

$(document).ready(function() { 

    //On Select Change... 
    $("#select").change(function() { 

     //Get Current Value 
     var val = $(this).val(); 

     //If the value is the 1st or 2nd dropdown... 
     if (val == "value1" || val == "value2") { 
      //Slide down the second search form and slide up the first 
      $("#search2").slideDown("fast"); //Slide Down Effect 
      $("#search1").slideUp("fast"); 
     } 
     //If the value is the 3rd, 4th, or 5th dropdown... 
     else if(val == "value3" || val == "value4" || val == "value5") { 
      //Slide down both the forms 
      $("#search1").slideDown("fast"); //Slide Down Effect 
      $("#search2").slideDown("fast"); 
     } 
     //If the value is nothing (choice is selected)... 
     else{ 
      //Slide up both forms 
      $("#search1").slideUp("fast"); 
      $("#search2").slideUp("fast"); 
     } 
    }); 
});​ 

我刪除了原來的else語句，因爲沒有需要它。