本文详解因 HTML 标签闭合错误（误写 为 ）导致下拉菜单中重复插入空选项的典型问题，并提供正确、安全、可维护的 PHP+MySQLi 下拉列表实现方案。
本文详解因 html 标签闭合错误（误写 `
在使用 PHP 和 MySQLi 动态生成 HTML <select></select> 下拉菜单时，一个看似微小的标签书写错误，却会引发明显的渲染异常——如您所见：数据库中明明只有 6 条有效分类（Business、World、Learning 等），但页面却渲染出成对出现的非空项与空白 <option></option>。根本原因在于原始代码中错误地将结束标签写成了 <option></option>（而非 ）：
echo "<option>
{$cat_title}
<option>"; // ❌ 错误：这是另一个未闭合的 <option> 开始标签！浏览器解析时，会将其理解为：
-
<option></option>→ 开始一个选项； -
{$cat_title}→ 文本内容； -
<option></option>→ 又开始一个新选项（无内容，自动为空）； - 后续没有显式闭合，HTML 解析器尝试自动修复，最终形成交替的“有值项 + 空项”结构。
✅ 正确写法必须严格使用 闭合每个选项：
<?php
echo '<select class="form-control" name="post_category">';
$query = "SELECT cat_id, cat_title FROM categories ORDER BY cat_title";
$select_all_categories_query = mysqli_query($connection, $query);
// 检查查询是否成功（生产环境必备）
if (!$select_all_categories_query) {
die("Query failed: " . mysqli_error($connection));
}
// 添加默认提示选项（用户体验更佳）
echo '<option value="">— 请选择分类 —</option>';
while ($row = mysqli_fetch_assoc($select_all_categories_query)) {
$cat_id = (int)$row['cat_id'];
$cat_title = htmlspecialchars($row['cat_title'], ENT_QUOTES, 'UTF-8');
// 只输出非空、已转义的标题（防御XSS）
if (!empty($cat_title)) {
echo "<option value=\"{$cat_id}\">{$cat_title}</option>";
}
}
echo '</select>';
?>? 关键改进说明：
- ✅ 语法修正：
闭合标签准确无误； - ✅ 字段精简：
SELECT cat_id, cat_title避免SELECT *的冗余开销； - ✅ 安全防护：
htmlspecialchars()防止 HTML 注入（如分类名含<script></script>）； - ✅ 语义增强：添加
name="post_category"便于表单提交识别； - ✅ 用户体验：前置带空
value的提示选项，明确操作意图； - ✅ 健壮性：增加查询失败判断，避免静默错误；
- ✅ 排序优化：
ORDER BY cat_title使选项按字母序排列，提升可读性。
⚠️ 注意事项：
- 切勿在循环内重复调用
mysqli_query()（此处仅执行一次）； - 若需支持“禁用/默认选中”，可为
<option></option>添加selected或disabled属性； - Bootstrap 3 中
.form-control对<select></select>支持良好，无需额外样式干预； - 建议后续升级至 PDO 或 MySQLi 面向对象风格，并启用预处理语句防范 SQL 注入（当前示例假设输入可信）。
通过修正标签结构并融入基础安全与体验实践，即可彻底消除空白选项，构建稳定、专业、符合现代 Web 开发规范的动态下拉组件。
