基于jQuery实现下拉选择框联动增删输入组并保留已填数据

这个问题的核心在于你之前的代码每次都用content.html(newContent)完全清空并重新渲染所有输入组，所以当减少选择数量时，之前填写的数据自然就丢失了。我们需要改成只添加缺少的输入组，或者移除多余的最后几个组，而不是全盘重建。

下面是修改后的实现方案，完全保留已有输入数据，同时满足你的需求：

<select name="adults" id="adults" class="shadow">
  <option value="1">1 adult</option>
  <option value="2">2 adults</option>
  <option value="3">3 adults</option>
  <option value="4">4 adults</option>
  <option value="5">5 adults</option>
</select>
<div id="content"></div>

<script>
$(function() {
  var content = $("#content");
  // 定义单个乘客组的模板函数，传入乘客编号（比如2、3...）
  function getPassengerGroupHtml(passengerNum) {
    return `
      <div class="o-accent-box u-clearfix u-margin-bottom-medium passenger-detail">
        <h3 class="h5-like o-heading-icon icon-passenger">Passenger ${passengerNum} (Adult)<span class="field-required">*</span></h3>
        <div class="o-form-item form-item-title">
          <label for="title-select-${passengerNum}" class="u-visually-hidden">Title</label>
          <select id="title-select-${passengerNum}" name="visitor[${passengerNum}][title]" required="" class="o-form-item__txt-input">
            <option value="">Title</option>
            <option value="Mr">Mr</option>
            <option value="Mrs">Mrs</option>
            <option value="Ms">Ms</option>
            <option value="Miss">Miss</option>
            <option value="Dr">Dr</option>
          </select>
        </div>
        <div class="o-form-item form-item-first-name">
          <label for="pax-first-name-${passengerNum}" class="u-visually-hidden">First Name</label>
          <input id="pax-first-name-${passengerNum}" type="text" placeholder="First name(s)" name="visitor[${passengerNum}][firstName]" class="o-form-item__txt-input">
        </div>
        <div class="o-form-item form-item-surname">
          <label for="pax-surname-${passengerNum}" class="u-visually-hidden">Surname(s)</label>
          <input id="pax-surname-${passengerNum}" type="text" placeholder="Surname(s)" name="visitor[${passengerNum}][lastName]" class="o-form-item__txt-input">
        </div>
      </div>
    `;
  }

  $("#adults").change(function() {
    var selectedCount = parseInt($(this).val());
    // 需要的额外乘客组数量：选中n个成人，需要n-1组（因为第1个成人不需要额外组）
    var neededGroups = selectedCount - 1;
    var existingGroups = content.find('.passenger-detail').length;

    if (neededGroups > existingGroups) {
      // 情况1：选中数量大于现有组，添加缺少的组
      // 现有组对应的乘客编号是2到 (2 + existingGroups -1) = existingGroups +1
      // 需要添加从 (existingGroups +2) 到 selectedCount 的乘客组
      for (var i = existingGroups + 2; i <= selectedCount; i++) {
        content.append(getPassengerGroupHtml(i));
      }
    } else if (neededGroups < existingGroups) {
      // 情况2：选中数量小于现有组，移除多余的最后几个组
      var removeCount = existingGroups - neededGroups;
      content.find('.passenger-detail').slice(-removeCount).remove();
    }
    // 情况3：数量相等，不做任何操作
  }).trigger('change');
});
</script>

关键改进点说明： #

• 模板函数化：把单个乘客组的HTML抽成函数，方便复用，同时保证每个组的id都是唯一的（之前的代码存在id重复问题，比如多个组的id都是pax-first-name-0，这是无效的HTML）。
• 增量更新：
  • 当选择数量增加时，只添加缺少的那几组，不会触动已有的输入组，所以数据保留。
  • 当选择数量减少时，用slice(-removeCount)选中最后几个组并移除，前面的组完全不动，数据自然保留。
• 修复id重复问题：所有表单元素的id都用乘客编号（比如title-select-2、pax-first-name-3），避免DOM元素id冲突。

这样修改后，你选择5时会添加5-1=4组乘客输入框，之后选择4时，只会移除最后1组，前面3组的输入数据会完全保留，完美符合你的需求。

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