下拉框控制表格行显隐异常：样式错误应用至下拉框而非目标行

核心问题1：函数名冲突 #

你写的toggle函数名和DOM元素的内置toggle()方法重名了！当<select>的onchange触发toggle()时，浏览器会优先调用下拉框自身的toggle()方法——这个方法的作用就是切换元素自身的显示/隐藏，所以才会把下拉框给藏起来，根本没执行你写的自定义函数。

核心问题2：变量取值错误 #

你的JS代码里：

const $selectType = document.getElementById("selectType").value ;

这里$selectType已经是下拉框选中的字符串值了，后面却又写$selectType.value，这会得到undefined，导致条件判断完全不生效。

修复后的完整代码 #

<table>
  <tr>
    <th>Clean Type</th>
    <td>
        <select id="selectType" name="selectType" class="textbox" onfocus="calcCheck()" onchange="toggleCleanOptions()">
            <option value="First Time Clean" <?php if($selectType == "First Time Clean"){ echo "selected";}?>>First Time Clean</option>
            <option value="New Car Clean" <?php if($selectType == "New Car Clean"){ echo "selected";}?>>New Car Clean</option>
        </select>
    </td>
  </tr>
  <tr id="contents1">
      <th>Clean Options</th>
      <td>
        <div id="contents2">
            <input name="polish" type="checkbox" value="" rel="100.00" onchange="calcCheck()"  <? echo $polish ?> /> <?=translate('polish')?><br />
            <input name="shampoo" type="checkbox" value="" rel="125.00" onchange="calcCheck()"  <? echo $shampoo ?> /> <?=translate('shampoo')?>
        </div>
      </td>
  </tr>
</table>

<script type="text/javascript">
   function toggleCleanOptions() {
        const selectedValue = document.getElementById("selectType").value;
        const targetRow = document.getElementById("contents1");
        
        if(selectedValue == "New Car Clean") {
            targetRow.style.display = 'none';
        } else {
            targetRow.style.display = 'table-row';
        }
    }
</script>

修复说明 #

1. 把自定义函数名改成toggleCleanOptions，彻底避免和内置方法冲突；
2. 修正变量取值，直接用selectedValue做条件判断；
3. 提前获取目标表格行元素，减少重复DOM查询，代码更简洁；
4. 简化了条件判断，因为只有两个选项，else分支直接处理即可。

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