如何通过$.each无ID修改select？Bootstrap表单清空问题

问题分析 #

你之前的代码直接通过DOM节点索引（col['children'][col['children']['length'] - 2]）定位select/input，存在两个核心问题：

• DOM的children属性会包含文本节点（比如代码里的换行、空格），导致索引计算错误，拿到的可能不是目标表单元素
• 对于Select2插件，直接修改原生select的value后，没有触发插件的更新逻辑，导致报错或UI不同步

修正后的实现（无ID方案，适配动态增删） #

function ClearSelectedElems(form) {
  // 遍历表单内的所有row
  form.find('.row').each(function() {
    // 遍历当前row内的所有col
    $(this).find('.col').each(function() {
      const $col = $(this);
      const $checkbox = $col.find('input[type="checkbox"]').first();
      
      // 仅处理复选框被选中的列
      if ($checkbox.is(':checked')) {
        // 定位当前列内的select或input（最后一个表单元素）
        const $target = $col.find('select, input[type="text"]').last();
        
        if ($target.is('select')) {
          // 处理Select2控件：设置值并触发插件更新
          $target.val('777777').trigger('change');
        } else {
          // 处理普通文本输入框：设置值
          $target.val('777777');
        }
      }
    });
  });
}

关键优化点 #

• 精准元素定位：用jQuery选择器$col.find('input[type="checkbox"]').first()和$col.find('select, input[type="text"]').last()，完全避开DOM节点索引的坑，不管列内有没有额外的span、文本节点，都能准确找到目标元素
• Select2适配：修改select值后调用.trigger('change')，让Select2插件同步更新UI和内部状态，避免报错
• 动态场景兼容：全程依赖类选择器（.row、.col）和标签类型选择器，不需要给元素加固定ID，完美支持动态添加/删除行列的场景

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