jquery создавать и удалять поля на основе выбора из выпадающего меню

Question

Мне нужно использовать jquery для добавления и удаления полей ввода по выбору пользователя из выпадающего меню. Я могу выполнить функцию добавления полей ввода. Но запутался в удаленной части. Может ли кто-нибудь дать мне несколько советов? Вот demo HTML код:

<div class="form-fields"> 

<table> 
<tr><th><label for="id_NOA">Number of Applications:</label></th><td><select name="NOA" id="id_NOA"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 

</select></td></tr> 

<tr><th><label for="id_Ap_m">Application method 1:</label></th><td><select name="Ap_m" id="id_Ap_m"> 
<option value="" selected="selected">Select an application method</option> 
<option value="1">Aerial</option> 
<option value="2">Ground Sprayer</option> 
</select></td></tr> 

<tr><th><label for="id_Ar">Application rate:</label></th><td><input type="text" name="Ar" value="1" id="id_Ar" /></td></tr> 

</table> 

</div> 

JQuery код:

$(document).ready(function() { 
    i = 2; 
    $("label[for='id_Ar']").html('Application rate 1:'); 
    $('#id_NOA').change(function() { 
     var count_c = $(this).val(); 
     while (i <= count_c) { 
      if (i <= count_c) {  
       $('<tr><th><label for="id_Ap_m">Application method ' + i + ':</label></th><td><select name="Ap_m" id="id_Ap_m"><option value="" selected="selected">Select an application method</option><option value="1">Aerial</option><option value="2">Ground Sprayer</option></select></td></tr>').appendTo("table");  
       $('<tr><th><label for="id_Ar">Application rate ' + i + ':</label></th><td><input type="text" name="Ar" value="1" id="id_Ar" /></td></tr>').appendTo("table"); 
       i++; 
      } 

//this is the part I could not make it work 
      if (i>count_c){ 

       $('.form-fields:last').remove(); 
       i--; 

      } 
     } 
    }); 



});​ 

Answer 1

Вы хотите что-то вроде этого http://jsfiddle.net/slash197/a98U8/5/?

$(document).ready(function() { 
 

 
    $('#id_NOA').change(function(){ 
 
     
 
     var total = $(this).val(); 
 
     
 
     //remove all 
 
     $('.app_method').each(function(index){ 
 
      if (index != 0) $(this).remove(); 
 
     }); 
 
     $('.app_rate').each(function(index){ 
 
      if (index != 0) $(this).remove(); 
 
     }); 
 
     
 
     //create new ones 
 
     for (var i = 2; i <= total; i++) 
 
     { 
 
      $('.app_method:first').clone().appendTo('table'); 
 
      $('.app_rate:first').clone().appendTo('table'); 
 
     } 
 
     
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="form-fields"> 
 
    <table> 
 
     <tr> 
 
      <th><label for="id_NOA">Number of Applications:</label></th> 
 
      <td> 
 
       <select name="NOA" id="id_NOA"> 
 
        <option value="1">1</option> 
 
        <option value="2">2</option> 
 
        <option value="3">3</option> 
 
        <option value="4">4</option> 
 
       </select> 
 
      </td> 
 
     </tr> 
 
     <tr class="app_method"> 
 
      <th><label>Application method 1:</label></th> 
 
      <td> 
 
       <select name="Ap_m"> 
 
        <option value="" selected="selected">Select an application method</option> 
 
        <option value="1">Aerial</option> 
 
        <option value="2">Ground Sprayer</option> 
 
       </select> 
 
      </td> 
 
     </tr> 
 
     <tr class="app_rate"> 
 
      <th><label>Application rate:</label></th> 
 
      <td><input type="text" name="Ar" value="1" /></td> 
 
     </tr> 
 
    </table> 
 
</div>