如何使用Jquery基于选择输入以表单形式动态添加DIV

Question

 var beneficiarioDiv = $('<div class="beneficiario-wrap"><label for="nombre_bene">Nombre y Apellido</label><input type="text" name="nombre_bene" value=""><label for="nombre_bene">Cedula beneficiario</label><div><select name="cedulabene_tipo"><option value="Venezolano" selected>V </option><option value="Extranjero">E </option></select> <input type="text" name="cedulabene_no" value="" maxlength="8"></div><label for="edad_bene">Edad beneficiario</label><input type="text" name="edad_bene" value=""></div>'); $('#beneficiarios').change(function() { var beneficiarios = $('#beneficiarios :selected').val(); // this gives me the value that the user selected <div class="beneficiarios-wrapper"></div> // this is the div where I want to append the number of divs selected by the user }); 

  <label for="beneficiarios">Cantidad de beneficiarios</label> <select name="beneficiarios" id="beneficiarios"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> 

I have been hitting my head cuz I can't think on a way to get this to work ( I'm new with Jquery )

So.. I have a select input field in a form with number options.. I want to check which of the options the user selected and add a DIV the number of times the user selected ( from 0 to 10 ) and if the user selects a number lower than the one he previously chose delete the DIVs previously added and add the ones he now chose (if he selects number 3 add 3 DIVs, if he now selects 2 because he was just mistaken then just show 2 instead of the 3)

I know how to get the number the user selected with the .change event listener and the :selected.val() method.. my problem is appending the divs that number of times the user selected, and deleting them if the user selects a number lower than.

Please i don't know how to make this work!

Answer 1

In your change function, first clear the wrapper and then append the divs in a loop

 var beneficiarioDiv = '<div class="beneficiario-wrap"><label for="nombre_bene">Nombre y Apellido</label><input type="text" name="nombre_bene" value=""><label for="nombre_bene">Cedula beneficiario</label><div><select name="cedulabene_tipo"><option value="Venezolano" selected>V </option><option value="Extranjero">E </option></select> <input type="text" name="cedulabene_no" value="" maxlength="8"></div><label for="edad_bene">Edad beneficiario</label><input type="text" name="edad_bene" value=""></div>'; $('#beneficiarios').change(function() { var beneficiarios = $('#beneficiarios :selected').val(); // this gives me the value that the user selected $('.beneficiarios-wrapper').empty(); while (beneficiarios--) { $('.beneficiarios-wrapper').append(beneficiarioDiv); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label for="beneficiarios">Cantidad de beneficiarios</label> <select name="beneficiarios" id="beneficiarios"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <div class="beneficiarios-wrapper"></div> 

Answer 2

You could just append the divs in a loop:

var b = = $('#beneficiarios :selected').val();
while(b--) {
   $(".beneficiarios-wrapper").append("<div>"+b+"</div>")     
}          

Answer 3

You can clear the div on change event. Then use a for loop to append div

  const divToAppend = '<div>test</div>'; let number = $('#beneficiarios').val(); $('#beneficiarios').on('change', function () { $('#placeholder').html(''); number = $(this).val(); for (let i = 0; i < number; i++) { $('#placeholder').append(divToAppend); } }); 

  <label for="beneficiarios">Cantidad de beneficiarios</label> <select name="beneficiarios" id="beneficiarios"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <div id="placeholder"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>