如何通过AJAX和JQuery动态加载外部HTML表单并按需循环添加

当然可以！把复杂的HTML结构单独存成模板文件的做法非常明智——既能让你的主JS代码保持清爽，也能让HTML片段的维护变得更简单。下面是一步步的实现方案：

1. 创建单独的HTML模板文件 #

首先，把你要重复追加的HTML内容保存成一个独立的文件，比如命名为beneficiario-template.html。注意：要避免重复的ID（因为ID在页面中必须唯一），可以把模板里的ID和name替换成带索引占位符的形式，比如用{{index}}标记，后续JS循环时替换成具体的数字：

<div class="row beneficiario-info">
  <div class="col-md-6">
    <div class="form-group w-75">
      <label for="bene-nombreyapellido-{{index}}">Nombre y Apellido</label>
      <input type="text" name="bene-nombreyapellido-{{index}}" id="bene-nombreyapellido-{{index}}" class="form-control">
    </div>
    <div class="form-group w-75">
      <label for="bene-ci-numero-{{index}}">Cedula de identidad</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <select name="bene-ci-tipo-{{index}}" id="bene-ci-tipo-{{index}}" class="custom-select">
            <option value="VE">V</option>
            <option value="EX">E</option>
          </select>
        </div>
        <input type="text" name="bene-ci-numero-{{index}}" id="bene-ci-numero-{{index}}" class="form-control" maxlength="8">
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group w-75">
      <label for="parentezco-{{index}}">Parentezco</label>
      <select name="parentezco-{{index}}" id="parentezco-{{index}}" 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="servicios_beneficiario-{{index}}">Servicios Adicionales</label>
      <select name="servicios_beneficiario-{{index}}" class="custom-select" id="servicios_beneficiario-{{index}}" 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>
</div>

2. 修改JavaScript代码：加载模板并循环追加 #

接下来，在你的主JS文件中，先通过AJAX加载模板并缓存起来（避免每次切换都重复请求），然后监听下拉框的变化，根据选中的数量循环生成对应的内容：

// 缓存模板内容，避免重复请求
let beneficiarioTemplate = null;
const beneficiarios_wrapper = $('#beneficiarios-wrapper'); // 确保这个选择器匹配你的容器ID

// 先加载模板文件
$.get('beneficiario-template.html', function(template) {
  beneficiarioTemplate = template;
});

// 监听下拉框变化（注意：这里要和你的select ID匹配，原代码里的#ctd-beneficiarios对应你的select要改成这个ID，或者把选择器改成#beneficiarios）
$('#ctd-beneficiarios').on('change', function() {
  const numero = parseInt($(this).val());
  beneficiarios_wrapper.empty(); // 清空容器

  // 如果模板还没加载完成，先等待
  if (!beneficiarioTemplate) {
    alert('模板加载中，请稍后再试');
    return;
  }

  // 循环生成对应数量的内容
  for (let i = 0; i < numero; i++) {
    // 替换模板里的占位符为当前索引
    const templateWithIndex = beneficiarioTemplate.replace(/{{index}}/g, i);
    // 追加到容器中
    beneficiarios_wrapper.append(templateWithIndex);

    // 如果你的多选框需要初始化插件（比如select2），在这里添加初始化代码
    // $('#servicios_beneficiario-' + i).select2();
  }
});

3. 关键注意事项 #

• 选择器匹配：确保你的下拉框ID和JS中的$('#ctd-beneficiarios')一致，原代码里的select ID是beneficiarios，需要统一成同一个ID。
• ID唯一性：模板里的ID和name必须带索引，否则页面会出现重复ID，导致表单提交或JS操作出错。
• 模板缓存：把模板缓存到变量里，避免每次切换下拉框都发起AJAX请求，提升性能。
• 插件初始化：如果你的多选框使用了第三方插件（比如Select2），每次追加新元素后都需要重新初始化对应的插件。

这样实现后，你就可以通过下拉框选择数量，动态加载并追加对应的表单片段了，代码结构也会清晰很多！

内容的提问来源于stack exchange，提问作者roger rengifo