jquery ajax加載數據選項選擇

Question

這裏是我的html，將加載ajax調用。

  <select id="choice-id" name="choice_name"> 
       <option value="2">2</option> 
       <option value="3" selected="">3</option> 
       <option value="4">4</option> 
       <option value="5">5</option> 
       <option value="6">6</option> 
      </select> 
      <div style="display: block;" id="select" class="other"> 
       <input id="other-0" name="other_0" type="text" value="abc"> 
       <input id="other-1" name="other_1" type="text" value="pqr"> 
       <input id="other-2" name="other_2" type="text" value="rst"> 
      </div> 

這裏是我的jQuery改變輸入字段對應的選項選擇。如果我選擇值爲'6'的選項，它將生成沒有任何值的6個輸入字段。

$(document).on('change','#choice-id',function() { 
     var choicesizeSelected = $("#choice-id :selected").val(); 
     $('.other').empty(); 
     for(var i=0; i<choicesizeSelected; i++) { 
     $('.other').append("<input id='other-"+i+"' type='text' name='other_"+i+"'></input>"); 
      } 
} 

此代碼工作正常。但如果我再次選擇默認選項3，我想要返回默認3輸入字段具有相同的值。

在此先感謝。

Answer 1

你在做什麼是清空整個.other股利。

相反，比較輸入的數量是大於還是小於選定的數量。

如果所選的號碼是更大的：添加字段
如果所選的號碼是小：刪除字段
如果所選的號碼是一樣的：無能爲力

$(function() { 
    $('#choice-id').on('change', function() { 
     var newNum = $(this).find(':selected').val(); 
     var oldNum = $('.other input').length; 

     if(oldNum > newNum) { 
      var x = parseInt(newNum)+1; 
      $('.other input:nth-child(n+'+x+')').remove(); 
     } 
     else if(oldNum < newNum) { 
      for(var i=oldNum; i<newNum; i++) { 
       $('.other').append("<input id='other-"+i+"' type='text' name='other_"+i+"'></input>"); 
      } 
     } 
    }); 
}); 

DEMO