如何在下拉框选择‘Location’时隐藏指定div区域？

当前页面需求：页面加载时完全隐藏表格区域（包含Notes），选择筛选器中的具体地点选项后，显示表格表头及对应数据。目前已实现加载隐藏与筛选功能，但存在问题：当Location下拉菜单选择「Location」选项时，Notes区域仍会显示，需修复为与页面初始加载状态一致，即隐藏整个表格区域。

修改方案 #

在下拉框的change事件中添加条件判断，根据选中值决定是否显示#table-wrap容器：

$(document).ready(function () {
  // 页面加载时隐藏表格区域
  $('#table-wrap').hide();

  var table = $('#example').DataTable({
    paging: false,
    searching: true,
    lengthChange: false,
    responsive: false,
    scrollX: true,
    bInfo: false,
    bSort: false,
    "language": {
      "zeroRecords": ""
    }
  });

  $('#table-filter').on('change', function () {
    var selectedValue = this.value;
    // 根据选中值判断显示/隐藏表格区域
    if (selectedValue === 'Location') {
      $('#table-wrap').hide();
    } else {
      $('#table-wrap').show();
      table.search(selectedValue).draw();
    }
  });
});

代码说明 #

• 原逻辑在下拉框变更时直接显示#table-wrap，未区分默认选项；新增条件判断后，选中「Location」时会重新隐藏容器，回到初始状态
• 选中具体地点选项时，正常显示容器并执行数据筛选，符合需求

CSS与HTML代码无需修改，保持原有内容即可。

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