Drupal7带AJAX视图暴露过滤器：下拉框默认选中类操作问题

你当前的代码逻辑存在两个关键问题：一是强制把所有下拉的第一个选项设为选中，二是直接给所有<select>添加test类，没有区分每个下拉的实际选中状态，而且完全没考虑视图AJAX刷新后元素重新渲染的情况。下面是针对你需求的完整解决方案：

核心思路 #

我们需要实现三个核心点：

• 为每个下拉单独判断是否选中默认选项（第一个选项），动态添加/移除test类
• 处理页面初始加载时的下拉状态
• 监听下拉的change事件实时更新类名，同时监听Drupal视图的AJAX完成事件，确保AJAX刷新后功能依然正常

完整代码实现 #

(function($) {
  // 单个下拉的状态检查与类名更新函数
  function updateSelectTestClass($select) {
    // 判断当前下拉是否选中了第一个选项（默认选项）
    if ($select.find('option:eq(0)').is(':selected')) {
      $select.addClass('test');
    } else {
      $select.removeClass('test');
    }
  }

  // 批量处理所有目标下拉的初始化与事件绑定
  function handleAllSelects() {
    // 定位所有目标下拉，这里用你的容器类.selDiv + select来精准匹配
    $('.selDiv select').each(function() {
      // 初始化当前下拉的类名
      updateSelectTestClass($(this));
      // 绑定change事件，用命名空间避免重复绑定
      $(this).off('change.testClass').on('change.testClass', function() {
        updateSelectTestClass($(this));
      });
    });
  }

  // 页面加载完成后执行初始化
  $(document).ready(function() {
    handleAllSelects();
  });

  // 监听Drupal视图的AJAX完成事件，因为AJAX刷新后下拉会被重新渲染
  $(document).on('ajaxComplete', function(event, xhr, settings) {
    // 仅处理视图相关的AJAX请求
    if (settings.url.indexOf('views/ajax') !== -1) {
      handleAllSelects();
    }
  });
})(jQuery);

代码细节说明 #

• updateSelectTestClass：封装单个下拉的处理逻辑，避免重复代码，确保每个下拉的类名只和自身的选中状态挂钩
• handleAllSelects：批量处理所有下拉，同时给每个下拉绑定change事件（用命名空间testClass防止多次绑定导致的重复触发）
• ajaxComplete监听：Drupal视图通过AJAX刷新后，原来的下拉元素会被全新替换，所以需要重新执行初始化逻辑，保证新生成的下拉也能正常工作
• 选择器优化：如果你的下拉有专属类名，直接用类名选择器（比如.view-exposed-filter select）会比容器选择器更高效

替换原有代码 #

把你当前的代码替换成上面这段，就能实现：

• 初始状态下，默认选项选中的下拉自动添加test类
• 任意一个下拉切换到非默认选项时，仅该下拉移除test类，其他下拉保持原有状态
• 视图AJAX刷新后，所有下拉的类名依然能正确更新

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