基于数据库下拉选项隐藏表格指定行的问题排查

需求：点击btn_search按钮后，若“Select Grade Level”下拉框选中Grade 1，则隐藏表格中包含“Grade 6 Class”的<tr>行。

相关代码 #

下拉选择框HTML #

<select required onchange="section_add_nd(this);" id="selc_gr_id" data-style="btn-primary" class="form-control input-sm">
<option value="" selected disabled>-- Select Grade Level --</option>
</select>

下拉选项渲染函数 #

function sy_add_nd(e){
    let api_url = "../fetch.php";
    let gr = document.getElementById('selc_gr_id');
    let arr_pos = e.value.split(':')[1];

    fetch(api_url)
    .then((response) => response.json())
    .then((data) => {
        $gr_level = '<option value="" selected disabled>-- Select Grade Level --</option>';
        data[arr_pos]['gradelvl'].forEach(function(data){
            $gr_level+='<option value="'+data['yid']+':'+arr_pos+'">'+data['level_name']+'</option>';
        });
        gr.innerHTML = $gr_level;
        document.getElementById('sc_add_nd').innerHTML='<option value="" selected disabled>-- Select Section --</option>';
    });
}

尝试的按钮点击事件代码 #

document.getElementById('btn_search').addEventListener('click', function() {
  var selectedGrade = document.getElementById('selc_gr_id').value;
  var selectedSection = document.getElementById('sc_add_nd').value;

  var rows = document.querySelectorAll('#table tbody tr');

  for (var i = 0; i < rows.length; i++) {
    var gradeCell = rows[i].getAttribute('data-grade');
    var sectionCell = rows[i].getAttribute('data-section');

    if (gradeCell === selectedGrade && sectionCell === selectedSection) {
      rows[i].style.display = '';
    } else {
      rows[i].style.display = 'none';
    }
  }
  if (selectedGrade === 'Grade 1') {
    var tdcollection = document.getElementsByTagName('td');
    for (var i = 0; i < tdcollection.length; i++) {
      if (tdcollection[i].innerText.indexOf("Grade 6 Class") >= 0) {
        tdcollection[i].parentElement.style.display = 'none';
      }
    }
  }
});

问题原因 #

核心问题是判断条件不成立：
下拉选项的value是类似1:0的字符串（从数据库生成），而代码中用selectedGrade === 'Grade 1'判断，这里selectedGrade获取的是选项的value而非显示的文本，所以这个条件永远为false，导致隐藏行的代码从未执行。

解决方案 #

方案1：通过选中选项的文本判断 #

修改点击事件代码，获取选中选项的显示文本，再执行隐藏逻辑，同时合并原有筛选逻辑避免冲突：

document.getElementById('btn_search').addEventListener('click', function() {
  const gradeSelect = document.getElementById('selc_gr_id');
  // 获取选中选项的显示文本
  const selectedGradeText = gradeSelect.options[gradeSelect.selectedIndex].text;
  const selectedGrade = gradeSelect.value;
  const selectedSection = document.getElementById('sc_add_nd').value;

  const rows = document.querySelectorAll('#table tbody tr');

  rows.forEach(row => {
    // 原有筛选逻辑：匹配选中的年级和班级
    let shouldShow = row.getAttribute('data-grade') === selectedGrade && 
                    row.getAttribute('data-section') === selectedSection;
    
    // 额外判断：如果选中Grade 1，隐藏包含Grade 6 Class的行
    if (selectedGradeText === 'Grade 1') {
      if (row.textContent.includes('Grade 6 Class')) {
        shouldShow = false;
      }
    }
    
    row.style.display = shouldShow ? '' : 'none';
  });
});

方案2：通过选项的value直接判断（更高效） #

如果已知Grade 1对应的value是固定值（比如1:0），可以直接用value判断，无需依赖文本：

document.getElementById('btn_search').addEventListener('click', function() {
  const selectedGrade = document.getElementById('selc_gr_id').value;
  const selectedSection = document.getElementById('sc_add_nd').value;

  const rows = document.querySelectorAll('#table tbody tr');

  rows.forEach(row => {
    let shouldShow = row.getAttribute('data-grade') === selectedGrade && 
                    row.getAttribute('data-section') === selectedSection;
    
    // 直接用Grade1对应的value判断
    if (selectedGrade === '1:0') {
      if (row.textContent.includes('Grade 6 Class')) {
        shouldShow = false;
      }
    }
    
    row.style.display = shouldShow ? '' : 'none';
  });
});

优化说明 #

• 用forEach替代传统for循环，代码更简洁易读；
• 合并筛选逻辑，避免先设置行显示状态后又重复修改的问题；
• 用textContent.includes()替代innerText.indexOf()，兼容性更好且逻辑更直观。

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