jQuery如何获取动态新增select下拉框选中的id_casting值

核心问题出在两点：

• ID重复违规：HTML规范要求同一页面内id属性必须全局唯一，你所有行的下拉框都使用同一个id=id_casting，jQuery的ID选择器默认只会返回第一个匹配到的元素，后续新增的下拉框本来就无法被初始的选择器命中。
• 事件绑定方式错误：你直接把change事件绑定在页面初始化时就已存在的下拉框元素上，后续动态添加的元素在绑定事件的阶段还不存在，自然没有被绑定事件监听器。

分两步操作即可解决：

第一步：修正ID重复问题 #

把所有下拉框的id属性替换为class属性，动态生成新行时也遵循这个规则：

<!-- 原有错误写法 -->
<select id="id_casting">...</select>

<!-- 修改后写法 -->
<select class="id_casting">...</select>

第二步：使用事件委托绑定事件 #

不要直接给下拉框元素绑定事件，改为绑定到页面初始化时就存在的固定父容器上（比如包裹所有表单行的容器、表单本身，找不到合适的父容器也可以用document），通过选择器匹配触发事件的下拉框：

// 示例：假设所有表单行都包裹在id为form_wrap的容器内
$('#form_wrap').on('change', '.id_casting', function() {
  // 此处this指向当前触发change事件的下拉框元素，可直接获取当前行选中值
  const selectedVal = $(this).val();
  // 后续写你的业务逻辑即可
  console.log('当前选中值：', selectedVal);
})

jQuery的事件委托基于DOM事件冒泡机制：元素触发的事件会逐层向上传递到所有父级元素，我们把事件监听器绑定在永久存在的父级元素上，通过第二个参数的选择器筛选触发事件的子元素，无论子元素是初始加载还是后续动态生成，只要匹配选择器就可以触发回调逻辑。

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