javascript - jquery ajax loaded data option selection -

here html loaded ajax call.

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

here jquery changing input field corresponding option select. if select option value '6' generate 6 input field without values.

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

this code working perfectly. if select again default option 3, want return default 3 input field same values.

thanks in advance.

what doing emptying whole .other div.

instead, compare if number of inputs bigger or smaller selected.

if selected number bigger: add fields
if selected number smaller: remove fields
if selected number same: do nothing

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