如何使用jQuery检测select元素的error类并添加至指定div？

没问题，这个需求很常见，我们可以分初始检测和动态监听两个场景来实现，确保不管是页面加载时就存在的error类，还是后续验证动态添加/移除的，都能同步到目标div上。

1. 基础实现：页面加载时的初始检查 #

如果只需要在页面加载完成后，一次性检查select是否带有error类并同步到div，用这段代码就足够：

$(document).ready(function() {
  // 缓存DOM元素，避免重复查询提升性能
  const $targetSelect = $('#Conditionid');
  const $customDiv = $('.my-custom-select');

  // 检查select是否有error类，有则给div加上对应类
  if ($targetSelect.hasClass('error')) {
    $customDiv.addClass('error');
  }
});

2. 进阶实现：动态监听类的变化 #

表单验证通常是动态触发的——比如用户提交表单后才会给select加上error类。这种情况下，我们需要监听select的类属性变化，实时同步到div，这里可以用原生的MutationObserver（和jQuery兼容良好）：

$(document).ready(function() {
  const $targetSelect = $('#Conditionid');
  const $customDiv = $('.my-custom-select');

  // 先做初始状态检查
  if ($targetSelect.hasClass('error')) {
    $customDiv.addClass('error');
  }

  // 创建MutationObserver实例，专门监听类属性变化
  const classObserver = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      // 只处理class属性的变化
      if (mutation.attributeName === 'class') {
        // 用toggleClass自动处理添加/移除：第二个参数为true则加类，false则删类
        $customDiv.toggleClass('error', $targetSelect.hasClass('error'));
      }
    });
  });

  // 开始监听目标select的属性变化（仅监听class）
  classObserver.observe($targetSelect[0], { attributes: true });
});

3. 可选：结合表单验证触发时机优化 #

如果你清楚表单验证的触发时机（比如点击提交按钮、select选项变更），也可以直接在这些事件里做检查，这种方式更轻量：

$(document).ready(function() {
  const $targetSelect = $('#Conditionid');
  const $customDiv = $('.my-custom-select');
  const $form = $targetSelect.closest('form');

  // 表单提交时同步类状态
  $form.on('submit', function() {
    // 用setTimeout确保验证逻辑已经执行完毕，再检查类状态
    setTimeout(() => {
      $customDiv.toggleClass('error', $targetSelect.hasClass('error'));
    }, 0);
  });

  // 用户改变select选项时，同步验证状态
  $targetSelect.on('change', function() {
    // 也可以直接判断是否选中了有效选项（比如排除默认空选项）
    const hasError = !$(this).val();
    $customDiv.toggleClass('error', hasError);
  });
});

关键细节说明 #

• 缓存DOM元素：用变量存储查询到的元素，避免每次操作都重新遍历DOM，提升性能。
• toggleClass的妙用：第二个参数为布尔值时，能自动帮你处理类的添加/移除，不用写冗余的if-else判断。
• MutationObserver：原生API，能精准监听DOM元素的属性变化，完美适配动态添加/移除类的场景。

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