Как очистить значения формы при слайд-шоу в jquery?

Question

У меня есть простая форма для размещения отеля. Пользователь выбирает количество взрослых и детей из раскрывающихся списков, а форма затем позволяет пользователю выбирать возраст детей из вновь созданных выпадающих списков.

Я могу отображать и скрывать поля выбора. Однако, как только появится окно выбора, его значение публикуется независимо от того, будет ли оно позже скрыто или нет. Мне нужно очистить или сбросить значения полей выбора, которые больше не отображаются.

Вот мой JQuery:

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

    switch ($(this).val()) 
    { 
     case "0": 
     $("#hidechild1").slideUp("fast"); 
     $("#hidechild2").slideUp("fast"); 
     break; 
     case "1": 
     $("#hidechild1").slideDown("fast"); 
     $("#hidechild2").slideUp("fast"); 
     break; 
     case "2": 
     $("#hidechild1").slideDown("fast"); 
     $("#hidechild2").slideDown("fast"); 
     break; 
}   
    }); 
}); 

А вот мой HTML:

<form id="ExampleForm" method="post" action="results.php"> 
<fieldset> 
    <legend>Accommodation details. Please choose number of adults and children</legend>  
    <div class="input select"> 
     <label for="selectadult">Adult (>12)</label> 
     <select name="selectadult" id="selectadult"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option>        
     </select> 
    </div> 

    <div class="input select"> 
     <label for="selectchild">Children (0-12)</label> 
     <select name="selectchild" id="selectchild"> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="2">2</option>      
     </select> 
    </div>  

    <div class="hide" id="hidechild1"> 
     <br/>Please specify the ages of children: 
     <div class="input select"> 
      <label for="selectchild1">Child 1:</label> 
      <select name="selectchild1" id="selectchild1"> 
      <option value="none">-?-</option> 
      <option value="<1"><1</option> 
      <? for ($i=1;$i<=12;$i++) { echo "<option value=\"$i\">$i</option>"; } ?> 
      </select> 
     </div> 
    </div> 

    <div class="hide" id="hidechild2"> 
     <div class="input select"> 
      <label for="selectchild2">Child 2:</label> 
      <select name="selectchild2" id="selectchild2"> 
      <option value="none">-?-</option> 
      <option value="<1"><1</option>    
      <? for ($i=1;$i<=12;$i++) { echo "<option value=\"$i\">$i</option>"; } ?> 
      </select> 
     </div> 
    </div>  

</fieldset> 
<div class="submit"> 
    <input type="submit" value="Submit!" /> 
</div> 
</form> 

Answer 1

Попробуйте это:

switch ($(this).val()) { 
    case "0": 
     $("#hidechild1").slideUp("fast"); 
     $("#hidechild2").slideUp("fast"); 
     resetFields("#hidechild1"); 
     resetFields("#hidechild2"); 
     break; 
    case "1": 
     $("#hidechild1").slideDown("fast"); 
     $("#hidechild2").slideUp("fast"); 
     resetFields("#hidechild2"); 
     break; 
    case "2": 
     $("#hidechild1").slideDown("fast"); 
     $("#hidechild2").slideDown("fast"); 
     break; 
}  

function resetFields(id) { 
    $("select", id).val("none"); 
    // add other fields in here to reset, if needed. 
} 

Это может быть красивее, если вы включили эту функцию в базовый плагин, поэтому вы можете позвонить $("#hidechild1").slideUp("fast").resetFields(), но выше, по крайней мере, сработает для вас.

Answer 2

Вы можете просто сбросить значение val для каждого случая.

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

    switch ($(this).val()) 
    { 
     case "0": 
     $("#hidechild1").slideUp("fast"); 
     $('#hidechild1').val(""); 
     $("#hidechild2").slideUp("fast"); 
     $('#hidechild2').val(""); 
     break; 
     case "1": 
     $("#hidechild1").slideDown("fast"); 
     $("#hidechild2").slideUp("fast"); 
     $('#hidechild2').val(""); 
     break; 
     case "2": 
     $("#hidechild1").slideDown("fast"); 
     $("#hidechild2").slideDown("fast"); 
     break; 
}   
    }); 
}); 

Answer 3

При отправке формы, я считаю, вам необходимо очистить выбранные параметры.

$("#exampleForm").submit(function(){ 
    $("select:hidden option").attr("selected",false); 
}