克隆表格行时保留Area下拉选中值并重置Services下拉的jQuery问题

一、实现行克隆的需求：保留Area选中值，清空Services选中状态 #

核心思路是克隆前先提取原行的关键状态，克隆后针对性设置新行的下拉框状态，同时处理Select2的实例避免冗余DOM：

// 绑定Services下拉框的change事件触发克隆
$('select[name="services"]').on('change', function() {
  const $currentRow = $(this).closest('tr');
  
  // 先销毁当前行的Select2实例，还原为原生select（避免克隆出Select2生成的冗余DOM）
  if ($currentRow.find('select').data('select2')) {
    $currentRow.find('select').select2('destroy');
  }
  
  // 提取原行Area的选中值
  const selectedAreaVal = $currentRow.find('select[name="area"]').val();
  
  // 克隆行（用false避免克隆事件绑定，后续用委托事件处理关联逻辑）
  const $newRow = $currentRow.clone(false);
  
  // 给新行Area设置原选中值
  $newRow.find('select[name="area"]').val(selectedAreaVal);
  // 清空新行Services的选中状态，保留已加载的选项
  $newRow.find('select[name="services"]').val('').trigger('change');
  
  // 将新行插入到当前行下方
  $currentRow.after($newRow);
  
  // 重新初始化原行和新行的Select2
  $currentRow.find('select').select2();
  $newRow.find('select').select2();
  
  // 触发新行Area的change事件，自动加载对应Services选项（如果你的关联逻辑需要）
  $newRow.find('select[name="area"]').trigger('change');
});

二、解决Select2无法应用到所有下拉框的问题 #

问题根源通常是克隆时携带了原Select2的实例，或初始化时机/范围不对，按以下方式处理：

1. 用委托事件处理关联下拉框的加载
   确保新添加的行也能触发Area加载Services的逻辑，避免给每一行单独绑定事件：

// 委托事件绑定Area的change事件，覆盖所有现有和未来的行
$(document).on('change', 'select[name="area"]', function() {
  const $servicesSelect = $(this).closest('tr').find('select[name="services"]');
  
  // 这里写你的Services选项加载逻辑（比如AJAX请求）
  $.ajax({
    url: '/your-api/get-services',
    data: { areaId: $(this).val() },
    success: function(data) {
      $servicesSelect.empty();
      // 填充Services选项
      $.each(data, function(index, item) {
        $servicesSelect.append(`<option value="${item.id}">${item.name}</option>`);
      });
      // 加载完成后重新初始化Select2
      $servicesSelect.select2();
    }
  });
});

2. 避免重复初始化Select2
   不要直接全局调用$('select').select2()，而是针对新生成的元素单独初始化，同时在克隆前销毁原行的Select2实例（如第一部分代码所示），防止实例冲突。

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