使用jQuery实现患者列表的多标签筛选功能需求

需求回顾 #

• 选中「Select an option...」（空值选项）时，显示全部患者
• 选中至少一个标签时，仅显示包含至少一个选中标签的患者

现有代码问题 #

1. 未添加下拉框的选择事件监听，筛选逻辑无法触发
2. selectedValueFilterTags变量未定义，无法获取选中的标签值
3. 原JS代码存在语法错误（each循环的大括号闭合不匹配）
4. 未处理「选中默认空值选项」的逻辑分支

完整解决方案代码 #

HTML（保留原有结构）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<select name="select-tag" id="select-tag" class="form-control select-search" multiple>
  <option value="" selected>
    Select an option...
  </option>

  <option value="AL">
    AL
  </option>
  <option value="Cod. Amarelo">
    Cod. Amarelo
  </option>
  <option value="RQ">
    RQ
  </option>
</select>

<div class="patient-card">
  <p>Patient 1</p>
  <span class="tag">AL</span>
  <span class="tag">Cod. Amarelo</span>
  <span class="tag">RQ</span>
</div>

<div class="patient-card">
  <p>Patient 2</p>
  <span class="tag">AL</span>
  <span class="tag">Cod. Amarelo</span>
</div>

<div class="patient-card">
  <p>Patient 3</p>
  <span class="tag">AL</span>
</div>

<div class="patient-card">
  <p>Patient 4</p>
</div>

jQuery代码（修正并完善逻辑）

// 监听下拉框选择变化事件
$('#select-tag').on('change', function() {
  // 获取选中的标签值，过滤掉空值（默认选项）
  const selectedTags = $(this).val().filter(tag => tag !== '');

  // 无有效选中标签时，显示所有患者
  if (selectedTags.length === 0) {
    $('.patient-card').show();
    return;
  }

  // 有选中标签时，逐个检查患者卡片
  $('.patient-card').each((index, patient) => {
    // 判断当前患者是否有匹配的标签
    const hasMatchingTag = $(patient).find('.tag')
      .toArray()
      .some(element => selectedTags.some(tag => 
        element.textContent.trim() === tag
      ));

    // 根据匹配结果控制显示/隐藏
    hasMatchingTag ? $(patient).show() : $(patient).hide();
  });
});

// 页面加载时触发一次筛选，确保初始状态正确
$('#select-tag').trigger('change');

关键逻辑说明 #

1. 事件触发：通过change事件实时响应下拉框的选择操作
2. 空值过滤：排除默认空值选项，准确判断是否需要显示全部患者
3. 高效匹配：使用some方法快速判断患者标签与选中标签的匹配关系，避免冗余遍历
4. 文本去空格：对标签文本做trim()处理，避免因空格导致的匹配失败
5. 初始状态：页面加载时主动触发筛选，保证初始显示符合需求

内容的提问来源于stack exchange，提问作者José Guilherme