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

フィールドの値は、大文字と小文字のどちらでもリセットできます。

$(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); 
}