在 Web 开发中，从 MySQL 读取数据并渲染成下拉菜单是极常见的需求，尤其在数据编辑页面，必须让之前保存的选项自动处于选中状态。如果处理不当，用户每次打开编辑页都会看到默认第一项被选中，造成数据误读。下面通过一个具体示例说明完整实现思路。
一、核心原理
动态生成下拉菜单的本质是：先从 MySQL 查询出用于填充选项的数据集（如分类表、用户表），再在后端模板或脚本中循环拼接 <option> 标签。保持选中状态的关键，在于渲染每一个 <option> 时，将它的 value 与当前记录对应的字段值做相等比较，若一致则添加 selected 属性。
很多开发者习惯在前端用 JavaScript 事后设置选中项，但这会增加请求且不利于无障碍访问。服务端直出带 selected 的 HTML 才是稳健方案。同时，从数据库取出的文本可能含有空格、引号或尖括号，输出到页面前必须做 HTML 转义，否则会破坏标签结构。
1.1 数据库示例结构
假设有一张 category 表存放文章分类，另一张 article 表通过 cat_id 关联。编辑文章时，要从 category 取全部分类，并让 article.cat_id 对应的分类选中。
CREATE TABLE category ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL ); CREATE TABLE article ( id INT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(100), cat_id INT );
二、PHP 实现方式
使用 PHP 的 PDO 扩展可兼顾安全与清晰。下面示例先查询分类，再查询待编辑文章，最后在循环里判断选中。注意 htmlspecialchars 的使用，它把 < > & 等转义，避免名称中含特殊符号时页面错乱。
<?php
$pdo = new PDO('mysql:host=127.0.0.1;dbname=test;charset=utf8', 'user', 'pass');
// 取分类列表
$catStmt = $pdo->query('SELECT id, name FROM category ORDER BY id');
$categories = $catStmt->fetchAll(PDO::FETCH_ASSOC);
// 取当前文章
$artStmt = $pdo->prepare('SELECT id, title, cat_id FROM article WHERE id = ?');
$artStmt->execute([intval($_GET['id'])]);
$article = $artStmt->fetch(PDO::FETCH_ASSOC);
?>
<select name="cat_id">
<?php foreach ($categories as $cat): ?>
<?php $selected = ($cat['id'] == $article['cat_id']) ? ' selected' : ''; ?>
<option value="<?php echo $cat['id']; ?>"<?php echo $selected; ?>>
<?php echo htmlspecialchars($cat['name'], ENT_QUOTES); ?>
</option>
<?php endforeach; ?>
</select>
2.1 代码解析
上述代码中，PDO::FETCH_ASSOC 让结果以关联数组返回，方便用字段名取值。intval($_GET['id']) 做了基础过滤，配合 prepare 从根本上防 SQL 注入。循环内的三元表达式决定 selected 字符串，为空时不输出任何内容。
这种写法把数据获取与展示混在单文件里，仅适合演示。真实项目应放到视图层，由控制器传 $categories 与 $article 两个变量进来，保持逻辑与模板分离，也便于单元测试。
三、Node.js 实现方式
在 Node 环境通常用 mysql2 库配合模板引擎。下面以原生 mysql2/promise 为例，手动拼字符串展示逻辑，方便理解本质。
const mysql = require('mysql2/promise');
async function renderSelect(articleId) {
const conn = await mysql.createConnection({host: '127.0.0.1', user: 'user', password: 'pass', database: 'test'});
const [cats] = await conn.execute('SELECT id, name FROM category ORDER BY id');
const [arts] = await conn.execute('SELECT id, title, cat_id FROM article WHERE id = ?', [articleId]);
const article = arts[0];
let options = '';
for (const c of cats) {
const sel = c.id === article.cat_id ? ' selected' : '';
const name = c.name.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
options += `<option value="${c.id}"${sel}>${name}</option>`;
}
await conn.end();
return `<select name="cat_id">${options}</select>`;
}
3.1 注意事项
JavaScript 模板字符串里直接写 HTML 很方便，但转义要自己处理。上面用 replace 链做了简易转义，生产环境建议引入 escape-html 之类的包，减少遗漏。另外 execute 的第二个参数是数组，自动转义占位符，同样能防注入。
如果前端框架如 Vue 或 React 接管渲染，则可以把分类数组与当前 cat_id 作为数据态传给组件，用 v-model 或 value 属性绑定，选中状态由框架差分更新，不必手动拼 selected。但服务端提供 JSON 接口的逻辑依然要查库并做权限校验。
四、常见误区与优化
一个典型误区是先把所有选项输出，再用 jQuery 的 $(...).val(x) 设置选中。这种做法在分类多时无明显问题，但若页面禁用 JS 则失效，且不利于 SEO 与复制粘贴。服务端直出始终是底线。
另一个误区是选项 value 用名称而非 id。当名称含逗号或重复时，比对会出错。应始终用稳定主键做 value，名称仅作显示。若分类树有多级，可加 disabled 禁用父节点，或在前端用 optgroup 分组，后端只需多返回一个 parent_id 字段并在循环里判断层级缩进。
| 方案 | 优点 | 缺点 |
|---|---|---|
| 服务端直出 selected | 无 JS 依赖，结构稳健 | 需手动转义与拼接 |
| 前端 JS 设置 | 改动灵活，不刷页面 | 无 JS 时失效，不利抓取 |
| 框架数据绑定 | 代码清晰，易维护 | 需引入构建链与运行时 |
4.1 性能小技巧
分类表通常变动少，可用 Redis 或文件缓存查询结果，避免每次编辑页都查 MySQL。但要注意后台增删分类时清缓存，否则下拉看不到新项。对于超大型选项集（如上万城市），应改为懒加载或搜索框组件，而不是一次性生成大下拉。
最后提醒，表单提交后服务端还要再校验 cat_id 是否真实存在，不能因为页面下拉里出现过就信任。结合外键约束或二次查询，才能守住数据一致性。