为数据库非空行生成JS Switch Case时子分类缺失问题排查

我帮你梳理下代码里的几个关键问题，这些就是导致子分类显示异常、break触发过早的根源：

1. 子分类查询未关联主分类（核心错误） #

你当前的子分类查询是SELECT * FROM filters WHERE second_category <> ''，这会取出所有子分类，完全不管它属于哪个主分类。正确的逻辑应该是：当用户选择某个主分类时，只加载属于该主分类的子分类，所以需要给子分类查询加上primary_category = '当前选中的主分类'的条件。

2. Break触发过早的逻辑错误 #

你的判断if($i === count($row2))完全不对——count($row2)返回的是当前子分类行的字段数量（比如你的表有3个字段，它就返回3），而不是子分类的总条数。这会导致要么break根本不触发，要么在完全意料之外的时机触发，直接中断子分类的生成。正确的做法是：在所有子分类都添加完成后，再统一写break;。

3. 主分类Option缺少Value属性 #

你的主分类<option>标签没有设置value属性，虽然部分浏览器会默认把option文本作为value，但为了兼容性和代码的明确性，必须显式设置value="<?php echo $row['primary_category']; ?>"，否则onchange时传递的listindex可能是空值，导致switch无法匹配到对应的case。

4. 重复主分类的Case问题 #

如果你的filters表中有多条相同primary_category的记录，当前代码会生成多个完全相同的case语句，这在JavaScript中是无效的（后面的case会直接覆盖前面的），所以查询主分类时要先用DISTINCT去重。

修复后的完整代码 #

JavaScript联动逻辑

<script language="javascript" type="text/javascript">
function dropdownlist(listindex) {
 document.formname.subcategory.options.length = 0;
 switch (listindex) {
 <?php 
 // 查询去重后的主分类，避免生成重复case
 $stmt = $conn->query("SELECT DISTINCT primary_category FROM `filters` WHERE `primary_category` <> '' ");
 while ($row = $stmt->fetch()) { 
     // 转义内容防止XSS和语法错误
     $primaryCat = htmlspecialchars($row['primary_category'], ENT_QUOTES);
 ?>
 case "<?php echo $primaryCat; ?>" :
     <?php 
     // 预处理查询当前主分类对应的子分类，防止SQL注入
     $stmt2 = $conn->prepare("SELECT second_category FROM `filters` WHERE `primary_category` = ? AND `second_category` <> ''");
     $stmt2->execute([$row['primary_category']]);
     $subCats = $stmt2->fetchAll(PDO::FETCH_COLUMN);
     $i = 0;
     foreach($subCats as $subCat) {
         $subCatText = htmlspecialchars($subCat, ENT_QUOTES);
     ?>
     document.formname.subcategory.options[<?php echo $i;?>] = new Option("<?php echo $subCatText; ?>", "<?php echo $subCatText; ?>");
     <?php $i++; } ?>
     break; <!-- 所有子分类添加完成后再break -->
 <?php } ?>
 default: 
     document.formname.subcategory.options[0] = new Option("Select Category");
     break;
 }
 return true;
}
</script>

HTML分类选择部分

<table width="50%" border="0" cellspacing="0" cellpadding="5">
 <tr>
 <td>Category:</td>
 <td width="59%" align="left" valign="middle">
     <select name="category" id="category" onchange="dropdownlist(this.options[this.selectedIndex].value);">
         <option class="hidden" selected disabled value="">Select Category</option>
         <!-- 生成去重后的主分类选项 -->
         <?php 
         $stmt = $conn->query("SELECT DISTINCT primary_category FROM `filters` WHERE `primary_category` <> '' ");
         while ($row = $stmt->fetch()) { 
             $primaryCat = htmlspecialchars($row['primary_category'], ENT_QUOTES);
         ?>
         <option class="form-control" value="<?php echo $primaryCat; ?>"><?php echo $primaryCat; ?></option>
         <?php } ?>
     </select>
 </td>
 </tr>
 <tr>
 <td >Sub Category:</td>
 <td align="left" valign="middle">
     <select name="subcategory" id="subcategory">
         <option value="" selected disabled>Select Sub-Category</option>
     </select>
     <noscript>
         <select name="subcategory" id="subcategory" >
             <option class="hidden" selected disabled value="">Select Sub-Category</option>
         </select>
     </noscript>
 </td>
 </tr>
</table>

额外优化点说明 #

• 使用htmlspecialchars转义输出内容，避免分类名称里的引号、特殊字符导致JavaScript语法错误或XSS攻击
• 用PDO预处理语句查询子分类，防止SQL注入风险
• 简化了子分类的生成逻辑，用fetchAll一次性获取所有子分类，代码更简洁易读
• 移除了冗余的document.write，直接用静态HTML生成子分类select，更稳定

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