如何用jQuery遍历同class的多个div并同步对应select的input值

你的问题很典型——动态生成的DOM元素事件绑定失效，再加上原代码的事件逻辑没有正确定位到当前容器内的元素，导致只有第一个div生效。咱们一步步来修复：

原代码的问题分析 #

你原来的代码存在两个核心问题：

1. 事件绑定范围错误：直接给.day,.month,.year绑定change事件，只能作用于页面加载时已存在的元素，动态生成的新select不会触发事件。
2. 元素定位错误：在事件处理函数里直接操作所有div[data-name="date_of_birth"] input，而且each循环的逻辑混乱，导致所有select的变化都会修改同一个input，自然只有第一个生效。

正确的解决方案 #

我们需要用事件委托来处理动态元素，同时确保每次只操作当前select所在的date-dropdowns容器内的hidden input。

完整代码示例

// 用事件委托监听所有已存在和未来生成的日期选择器的change事件
$(document).on('change', '.date-dropdowns .day, .date-dropdowns .month, .date-dropdowns .year', function() {
  // 找到当前select所在的date-dropdowns容器
  const $container = $(this).closest('.date-dropdowns');
  
  // 获取当前容器内三个select的值
  const day = $container.find('.day').val() || '';
  const month = $container.find('.month').val() || '';
  const year = $container.find('.year').val() || '';
  
  // 拼接成示例中的日期格式（dd/mm/yyyy），如果有值为空则不设置或者设为空
  const formattedDate = (day && month && year) ? `${day}/${month}/${year}` : '';
  
  // 更新当前容器内的hidden input值
  $container.find('input[type="hidden"]').val(formattedDate);
});

代码关键点解释 #

1. 事件委托：$(document).on('change', 选择器, 处理函数) 会监听document上的change事件，只有当事件源匹配后面的选择器时才执行处理函数，这样动态生成的select也能触发事件。
2. 容器定位：$(this).closest('.date-dropdowns') 精准找到当前触发事件的select所在的父容器，确保我们只操作这个容器内的元素，不会影响其他日期选择器。
3. 日期格式处理：只有当day、month、year都有值时才拼接日期，避免生成不完整的日期字符串（比如/02/2015这种无效格式）。
4. 动态兼容：不管你通过按钮生成多少个新的date-dropdowns div，这段代码都能自动适配，不需要额外绑定事件。

测试验证 #

你可以试试点击按钮生成新的div，修改新div里的select选项，对应的hidden input值应该会同步更新，所有div的操作都会独立生效，不会互相干扰。

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