房间类型选择下拉框JS交互异常：仅第二个选项生效求助

你好，我来帮你拆解这个问题——下拉框选「AC-Room」时无法正常显示对应行，只有「Non AC-Room」能正常工作，核心问题出在你的功能逻辑设计上，咱们一步步梳理：

问题根源分析 #

你的toggleRow函数是切换目标行的显示状态，但这和你需要的「选中某类型就显示对应行、隐藏其他行」需求完全不匹配：

• 假设初始状态下AC房间行是显示的（display: ''），第一次选AC-Room时，toggleRow会把它切换为display: 'none'，反而把要显示的行隐藏了；
• 而Non AC房间行初始是隐藏的，选它时toggle会把它切换为显示，所以看起来正常，但这只是巧合，逻辑完全不符合需求。

另外你已经写了hideAll和showRow函数，但没有把它们组合成正确的选择逻辑。

修复后的代码 #

我们把逻辑改成「先隐藏所有行，再显示选中的目标行」，这样就不会受初始状态影响了：

修改后的JavaScript代码

function onSelect(thisselect) {
  var selected = thisselect.options[thisselect.selectedIndex].value;
  // 第一步：先把所有房间行都隐藏
  hideAll();
  // 第二步：只显示选中的那一行
  showRow(selected);
}

function showRow(id) {
  var row = document.getElementById(id);
  // 用'table-row'更规范，表格行的默认display值就是这个
  row.style.display = 'table-row';
}

function hideRow(id) {
  var row = document.getElementById(id);
  row.style.display = 'none';
}

function hideAll() {
  hideRow('optionAC');
  hideRow('optionNAC');
}

// 可选：页面加载完成后默认显示AC房间
window.onload = function() {
  showRow('optionAC');
};

确认表格行的ID对应

还要确保你的表格行ID和下拉框的value完全对应，比如：

<table>
  <tr id="optionAC">
    <td>AC 房间信息</td>
  </tr>
  <tr id="optionNAC">
    <td>Non AC 房间信息</td>
  </tr>
</table>

为什么这样改？ #

每次选择下拉选项时，先通过hideAll清空所有行的显示状态，再精准显示选中的行，逻辑清晰且不会出现状态混乱的情况。用table-row代替空字符串，是因为表格行的标准display属性值就是这个，能避免潜在的浏览器兼容性问题。

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