jquery 드롭 다운 메뉴의 선택에 따라 필드 생성 및 삭제

Question

jquery를 사용하여 드롭 다운 메뉴에서 사용자의 선택에 따라 입력 필드를 추가하거나 삭제해야합니다. 입력 필드 추가 기능을 사용할 수 있습니다. 그러나 제거 부분에 혼란스러워. 아무도 나에게 제안을 줄 수 있습니까? 당신이 http://jsfiddle.net/slash197/a98U8/5/ 같은 것을 원하는

$(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

:

<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 코드 : 여기 는 demo HTML 코드?

$(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>