我懂你的场景——现在是前端全量加载所有讲道内容后，用jQuery做筛选隐藏，想要实现联动更新下拉框可选选项的功能对吧？这是前端筛选里很常见的需求，我给你整理一套清晰的实现思路和代码示例：

核心思路 #

先把所有讲道内容的元数据（书籍/系列、讲员、年份）预存起来，每次筛选条件变化时，先根据当前选中值过滤出符合条件的讲道数据，再用这些数据去更新其他下拉框的可选选项（自动移除没有匹配结果的选项）。

步骤1：预存讲道元数据 #

页面加载完成后，遍历所有讲道项，把每个项的筛选维度数据收集到数组里。建议给每个讲道项加上data-*属性来存储这些数据，比从DOM文本里提取更可靠。

// 页面加载完成后收集所有讲道的元数据
$(document).ready(function() {
  const sermonData = [];
  $('.sermon-item').each(function() {
    const $item = $(this);
    sermonData.push({
      book: $item.data('book'),    // 对应书籍/系列的data属性
      speaker: $item.data('speaker'), // 对应讲员的data属性
      year: $item.data('year'),      // 对应年份的data属性
      element: $item // 可选：保留DOM元素，方便后续筛选隐藏
    });

    // 把数据存在全局或者闭包里，方便后续函数调用
    window.sermonData = sermonData;
  });

  // 初始化下拉选项和绑定事件
  initFilter();
});

步骤2：编写联动更新函数 #

写一个通用函数，根据当前选中的筛选条件，过滤出有效数据，再更新对应下拉框的选项。同时处理去重、排序，以及保留“全部”选项的逻辑：

// 更新下拉框可选选项的核心函数
function updateFilterOptions() {
  const sermonData = window.sermonData;
  // 获取当前各筛选器的选中值（空值代表“全部”）
  const selectedBook = $('#book-filter').val() || '';
  const selectedSpeaker = $('#speaker-filter').val() || '';
  const selectedYear = $('#year-filter').val() || '';

  // 先筛选出符合当前选中条件的讲道数据
  let filteredData = [...sermonData];
  if (selectedBook) filteredData = filteredData.filter(item => item.book === selectedBook);
  if (selectedSpeaker) filteredData = filteredData.filter(item => item.speaker === selectedSpeaker);
  if (selectedYear) filteredData = filteredData.filter(item => item.year === selectedYear);

  // 更新书籍下拉框（仅当未选中特定书籍时）
  if (!selectedBook) {
    const availableBooks = [...new Set(filteredData.map(i => i.book))].sort();
    updateDropdown('#book-filter', availableBooks);
  }

  // 更新讲员下拉框（仅当未选中特定讲员时）
  if (!selectedSpeaker) {
    const availableSpeakers = [...new Set(filteredData.map(i => i.speaker))].sort();
    updateDropdown('#speaker-filter', availableSpeakers);
  }

  // 更新年份下拉框（仅当未选中特定年份时，年份按倒序排列）
  if (!selectedYear) {
    const availableYears = [...new Set(filteredData.map(i => i.year))].sort((a,b) => b - a);
    updateDropdown('#year-filter', availableYears);
  }
}

// 辅助函数：更新单个下拉框的选项
function updateDropdown(selector, options) {
  const $dropdown = $(selector);
  const currentValue = $dropdown.val();
  
  // 清空现有选项，先添加“全部”选项
  $dropdown.empty().append('<option value="">全部</option>');
  
  // 添加筛选后的有效选项
  options.forEach(opt => {
    $dropdown.append(`<option value="${opt}">${opt}</option>`);
  });
  
  // 恢复之前的选中值（如果它仍在有效选项中）
  if (options.includes(currentValue) || currentValue === '') {
    $dropdown.val(currentValue);
  }
}

步骤3：绑定筛选事件并初始化 #

把筛选逻辑和联动更新绑定在一起，页面初始化时也执行一次，确保初始状态正确：

function initFilter() {
  // 先执行一次初始化，确保下拉选项正确
  updateFilterOptions();

  // 给所有筛选下拉框绑定change事件
  $('#book-filter, #speaker-filter, #year-filter').on('change', function() {
    // 先执行你现有的筛选隐藏逻辑
    yourExistingFilterFunction(); // 替换成你当前用来隐藏不符合项的函数

    // 再联动更新下拉选项
    updateFilterOptions();
  });
}

// 这里替换成你现有的筛选隐藏函数示例
function yourExistingFilterFunction() {
  const selectedBook = $('#book-filter').val() || '';
  const selectedSpeaker = $('#speaker-filter').val() || '';
  const selectedYear = $('#year-filter').val() || '';

  $('.sermon-item').each(function() {
    const $item = $(this);
    const matchesBook = !selectedBook || $item.data('book') === selectedBook;
    const matchesSpeaker = !selectedSpeaker || $item.data('speaker') === selectedSpeaker;
    const matchesYear = !selectedYear || $item.data('year') === selectedYear;

    $item.toggle(matchesBook && matchesSpeaker && matchesYear);
  });
}

注意事项 #

• 确保讲道项的data-*属性值和下拉框的option值完全匹配（大小写、空格一致），否则过滤会失效。
• 如果你的下拉框有自定义的“全部”选项文本，记得修改updateDropdown里的对应内容。
• 当数据量很大时，前端全量加载确实会影响性能，你提到的后端SQL动态加载是更优解，但如果暂时没法调整后端，上面的方案完全可以满足需求。

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