如何隐藏不包含select下拉选项data属性值的对应div元素

原代码存在的问题 #

• 没有绑定下拉选择框的change事件，选择选项时不会自动触发过滤逻辑
• 取data-prefix属性时选中了所有option节点，没有获取当前选中项的对应属性
• 直接批量获取所有时段标题的文本，没有逐个遍历每个时段做匹配判断
• 判断逻辑写反，且隐藏的节点层级错误，应该控制整个.timeslot时段节点的显示隐藏

实现代码 #

先确保页面已经引入jQuery库，再添加如下代码：

$('#change_service_booked').on('change', function () {
  // 拿到当前选中选项的prefix值
  const currentPrefix = $(this).find('option:selected').data('prefix');
  // 遍历所有时段卡片
  $('.booked-appt-list .timeslot').each(function () {
    const slotTitle = $(this).find('.timeslot-title').text();
    // 匹配标题里是否包含 # + 选中前缀 ，避免和其他内容重名，匹配更精准
    slotTitle.includes(`#${currentPrefix}`) ? $(this).show() : $(this).hide();
  });
// 页面加载完成后默认触发一次，适配初始选中的选项
}).trigger('change');

内容的提问来源于stack exchange，提问作者HCU-Memory