Javascript 通过AJAX和JQUERY动态添加输入表单

我现在遇到的问题是，我现在想要附加的内容太多，无法在主JavaScript文件中创建它

是否有一种方法可以将此内容放入其他HTML文件中，然后在JavaScript文件中使用AJAX调用它，并将此内容附加到一个循环中，以附加从选择输入标记中选择的次数

这是选择输入代码：

<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="row beneficiario-info">
  <div class="col-md-6">
    <div class="form-group w-75">
      <label for="bene-nombreyapellido">Nombre y Apellido</label>
      <input type="text" name="bene-nombreyapellido" id="bene-nombreyapellido" class="form-control">
    </div>
    <!-- form group -->
    <div class="form-group w-75">
      <label for="bene-ci-numero">Cedula de identidad</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <select name="bene-ci-tipo" id="bene-ci-tipo" class="custom-select">
            <option value="VE">V</option>
            <option value="EX">E</option>
          </select>
        </div>
        <!-- cedula tipo prepend -->
        <input type="text" name="bene-ci-numero" id="bene-ci-numero" class="form-control" maxlength="8">
      </div>
      <!-- input group -->
    </div>
    <!-- form group -->
  </div>
  <!-- col -->
  <div class="col-md-6">
    <div class="form-group w-75">
      <label for="parentezco">Parentezco</label>
      <select name="parentezco" id="parentezco" class="custom-select">
        <option value="">---------</option>
        <option value="hijo">Hijo</option>
        <option value="padre">Padre</option>
        <option value="hermano">Hermano o Hermana</option>
        <option value="conyugue">Conyugue</option>
      </select>
    </div>
    <div class="form-group">
      <label for="servicioadicional">Servicios Adicionales</label>
      <select name="servicios_beneficiario" class="custom-select" id="servicios_beneficiario" multiple="multiple">
        <option value="medico">Médico</option>
        <option value="odontologico">Odontológico</option>
        <option value="funerario">Funerario</option>
        <option value="vial">Víal</option>
      </select>
    </div>
  </div>
  <!-- col -->
</div>
<!-- row beneficiario -->

var number = 0;

$('#ctd-beneficiarios').on('change', function() {
  numero = $(this).val();
  beneficiarios_wrapper.html('');

  for (var i = 0; i < numero; i++) {

  }
}); 

受益人之歌 0 1. 2. 3. 4. 5. 6. 7. 8. 9 10 以下是我想附加的内容：

<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="row beneficiario-info">
  <div class="col-md-6">
    <div class="form-group w-75">
      <label for="bene-nombreyapellido">Nombre y Apellido</label>
      <input type="text" name="bene-nombreyapellido" id="bene-nombreyapellido" class="form-control">
    </div>
    <!-- form group -->
    <div class="form-group w-75">
      <label for="bene-ci-numero">Cedula de identidad</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <select name="bene-ci-tipo" id="bene-ci-tipo" class="custom-select">
            <option value="VE">V</option>
            <option value="EX">E</option>
          </select>
        </div>
        <!-- cedula tipo prepend -->
        <input type="text" name="bene-ci-numero" id="bene-ci-numero" class="form-control" maxlength="8">
      </div>
      <!-- input group -->
    </div>
    <!-- form group -->
  </div>
  <!-- col -->
  <div class="col-md-6">
    <div class="form-group w-75">
      <label for="parentezco">Parentezco</label>
      <select name="parentezco" id="parentezco" class="custom-select">
        <option value="">---------</option>
        <option value="hijo">Hijo</option>
        <option value="padre">Padre</option>
        <option value="hermano">Hermano o Hermana</option>
        <option value="conyugue">Conyugue</option>
      </select>
    </div>
    <div class="form-group">
      <label for="servicioadicional">Servicios Adicionales</label>
      <select name="servicios_beneficiario" class="custom-select" id="servicios_beneficiario" multiple="multiple">
        <option value="medico">Médico</option>
        <option value="odontologico">Odontológico</option>
        <option value="funerario">Funerario</option>
        <option value="vial">Víal</option>
      </select>
    </div>
  </div>
  <!-- col -->
</div>
<!-- row beneficiario -->

var number = 0;

$('#ctd-beneficiarios').on('change', function() {
  numero = $(this).val();
  beneficiarios_wrapper.html('');

  for (var i = 0; i < numero; i++) {

  }
}); 

诺姆布雷·阿佩利多
识别雪松
v
E
Parentezco
---------
你好
教士
赫尔马诺o赫尔马纳
康尤格
阿迪西奥纳莱斯酒店
梅迪科
牙托洛吉科
葬礼
维亚尔

下面是JavaScript代码：

<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="row beneficiario-info">
  <div class="col-md-6">
    <div class="form-group w-75">
      <label for="bene-nombreyapellido">Nombre y Apellido</label>
      <input type="text" name="bene-nombreyapellido" id="bene-nombreyapellido" class="form-control">
    </div>
    <!-- form group -->
    <div class="form-group w-75">
      <label for="bene-ci-numero">Cedula de identidad</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <select name="bene-ci-tipo" id="bene-ci-tipo" class="custom-select">
            <option value="VE">V</option>
            <option value="EX">E</option>
          </select>
        </div>
        <!-- cedula tipo prepend -->
        <input type="text" name="bene-ci-numero" id="bene-ci-numero" class="form-control" maxlength="8">
      </div>
      <!-- input group -->
    </div>
    <!-- form group -->
  </div>
  <!-- col -->
  <div class="col-md-6">
    <div class="form-group w-75">
      <label for="parentezco">Parentezco</label>
      <select name="parentezco" id="parentezco" class="custom-select">
        <option value="">---------</option>
        <option value="hijo">Hijo</option>
        <option value="padre">Padre</option>
        <option value="hermano">Hermano o Hermana</option>
        <option value="conyugue">Conyugue</option>
      </select>
    </div>
    <div class="form-group">
      <label for="servicioadicional">Servicios Adicionales</label>
      <select name="servicios_beneficiario" class="custom-select" id="servicios_beneficiario" multiple="multiple">
        <option value="medico">Médico</option>
        <option value="odontologico">Odontológico</option>
        <option value="funerario">Funerario</option>
        <option value="vial">Víal</option>
      </select>
    </div>
  </div>
  <!-- col -->
</div>
<!-- row beneficiario -->

var number = 0;

$('#ctd-beneficiarios').on('change', function() {
  numero = $(this).val();
  beneficiarios_wrapper.html('');

  for (var i = 0; i < numero; i++) {

  }
}); 

var编号=0；
$（'ctd受益人'）。在（'change'，function（）上{
numero=$（this.val（）；
expndtw-1.html（“”）；
对于（变量i=0；i

---

bengiiarios\u wrapper

是我希望将内容附加到的div。

与其将其存储在单独的文件中并通过AJAX检索，不如使用 隐藏模板如下所示：

$main=$（'#main'）；
对于（var i=0；iYou可以这样做，但是如果多次用于不同的模板，那么额外的往返服务器以获取更多html将非常糟糕。我的建议是，在html内部创建一个“隐藏”模板并克隆它，附加它，然后显示它。将模板代码放入
。
中将删除使用
显示：无
的要求。谢谢，这对我帮助很大。但是我对模板脚本中的一些内容有问题。我正在使用jQuery插件来影响其中的一些内容（使用multiselect插件）…我现在正确地添加了内容，但不知怎么的，插件不再影响内容了..我的头会因为这个严重的问题而爆炸。我在HTML上调用插件脚本后添加脚本，我所有的JS代码都在$（文档）中.ready函数也是..我在追加内容后调用multiselect函数，所以…我不知道问题出在哪里
.multiselect（'refresh'））
？哦，我明白了。如果您手动放入元素，然后调用
multiselect
，它会工作，但如果您追加并调用它，它不会工作？您的
multiselect
调用就在追加之后，对吗？不在单独的文档中。准备好回调了吗？