javascript - 如何使用 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>

我一直很头疼，因为我想不出一种方法来让它工作(我是 Jquery 的新手)

所以..我在带有数字选项的表单中有一个选择输入字段..我想检查用户选择了哪些选项，并添加一个DIV用户选择的次数(从0到10)，如果用户选择一个比他之前选择的数字低的数字，删除之前添加的 DIV 并添加他现在选择的 DIV(如果他选择数字 3，则添加 3 个 DIV，如果他现在因为错误而选择 2，则只显示 2，而不是3)

我知道如何使用 .change 事件监听器和 :selected.val() 方法获取用户选择的数字。我的问题是附加用户选择次数的 div，并在用户选择时删除它们选择一个低于的数字。

拜托，我不知道如何进行这项工作!

Answer 1

在您的更改函数中，首先清除包装器，然后在循环中附加 div

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>