PHP从MySQL生成下拉框，如何用JS自动填充对应分类文本框？

我来帮你搞定这个问题！核心问题确实是你没给option标签加上分类名称的自定义属性，导致JS拿不到对应的数据。下面是完整的单文件解决方案，包含PHP和JavaScript代码，完全符合你的需求：

1. 修正PHP代码：生成带分类数据的下拉列表 #

首先要在生成<option>标签时，把数据库里的categoryname存入自定义属性data-categoryname中，这样JavaScript就能直接读取数据，不用额外发AJAX请求（单文件场景下这种方式更高效）。

<?php
// 假设你已经完成MySQL数据库连接
$conn = mysqli_connect("localhost", "你的用户名", "你的密码", "你的数据库名");

// 查询dvd表的id、电影标题和分类名称
$sql = "SELECT id, title, categoryname FROM dvd";
$result = mysqli_query($conn, $sql);
?>

<!-- HTML结构 -->
<div>
    <label>选择电影：</label>
    <select id="movieSelect">
        <option value="">请选择一部电影</option>
        <?php while ($row = mysqli_fetch_assoc($result)): ?>
            <!-- 关键：给option添加data-categoryname属性，存储分类名称 -->
            <option 
                value="<?php echo htmlspecialchars($row['id']); ?>" 
                data-categoryname="<?php echo htmlspecialchars($row['categoryname']); ?>"
            >
                <?php echo htmlspecialchars($row['title']); ?>
            </option>
        <?php endwhile; ?>
    </select>
</div>

<div>
    <label>电影分类：</label>
    <!-- 只读文本框，仅用于展示 -->
    <input type="text" id="categoryDisplay" readonly>
</div>

这里用htmlspecialchars()是为了避免特殊字符（比如引号、尖括号）破坏HTML结构，同时防止XSS安全风险，一定要记得加！

2. JavaScript实现自动填充逻辑 #

接下来写JS代码，监听下拉框的选择变化，读取选中项的分类数据并填充到文本框：

// 等待页面DOM完全加载后再执行代码
document.addEventListener('DOMContentLoaded', function() {
    // 获取页面元素
    const movieSelect = document.getElementById('movieSelect');
    const categoryDisplay = document.getElementById('categoryDisplay');

    // 监听下拉框的change事件
    movieSelect.addEventListener('change', function() {
        // 获取当前选中的option元素
        const selectedOption = this.options[this.selectedIndex];
        // 读取自定义属性里的分类名称
        const categoryName = selectedOption.getAttribute('data-categoryname');
        
        // 填充到文本框，未选择时清空
        categoryDisplay.value = categoryName || '';
    });
});

为什么之前的代码失效？ #

你之前的问题根源是没有给option标签赋值data-categoryname属性，JavaScript自然无法获取到分类名称。现在把数据库里的分类数据直接嵌入到HTML标签中，JS可以直接读取，不需要额外的AJAX请求，完美适配单文件的需求。

额外提醒 #

• 确保你的SQL查询语句确实包含了categoryname字段，不然PHP无法获取到数据，data-categoryname属性也会是空的。
• 如果你的categoryname字段可能包含特殊字符，htmlspecialchars()是必须的，否则会导致HTML结构出错。

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