如何用document.getElementById实现下拉框选值后多文本框显示表字段

看起来你现在的核心问题是下拉框的选项里没有携带足够的字段信息，导致只能拿到显示的文本，没法把不同字段分配给不同的输入框。下面给你一套完整的修正方案：

1. 修正PHP端的下拉框生成代码 #

首先要修复查询执行的拼写错误（$mysqli->druglquery应该是$mysqli->query），同时循环取出所有药品数据，并且在<option>标签里用data-*属性存储DrugName、DrugForm这些额外字段，这样JS就能直接读取这些值：

<?php 
// 修正查询执行的方法名拼写
$druglquery = "SELECT ID,DrugName,DrugForm FROM DrugsInformation "; 
$druglresult = $mysqli->query($druglquery); 
?>
<select style='width:242px;' id="dcodeID" onchange="onselectchange();">
    <option value=''></option>
    <?php 
    // 循环取出所有数据行，而不是只取一行
    while($row = $druglresult->fetch_array(MYSQLI_BOTH)) { 
        // 用data属性存储DrugName和DrugForm，value存ID
        printf('<option value="%s" data-drugname="%s" data-drugform="%s">%s (%s)</option>', 
               $row['ID'], 
               htmlspecialchars($row['DrugName']), 
               htmlspecialchars($row['DrugForm']), 
               $row['ID'], 
               $row['DrugName']); 
    } 
    ?>
</select>

2. 优化JavaScript的onselectchange函数 #

现在我们可以从选中的option里直接获取ID、DrugName、DrugForm这些字段，然后分别赋值给对应的文本框：

function onselectchange() {
    var selectEl = document.getElementById("dcodeID");
    // 获取当前选中的option元素
    var selectedOption = selectEl.options[selectEl.selectedIndex];
    
    // 从data属性和value里取出对应字段值
    var drugId = selectedOption.value;
    var drugName = selectedOption.dataset.drugname;
    var drugForm = selectedOption.dataset.drugform;
    
    // 分别赋值给不同的文本框（这里假设你的文本框ID是test、test2、test3，对应ID、DrugName、DrugForm）
    document.getElementById("test").value = drugId;
    document.getElementById("test2").value = drugName;
    document.getElementById("test3").value = drugForm;
    
    alert("已更新字段值");
}

关键说明 #

• 用data-*属性存储额外字段是前端常用的方式，能避免把所有信息塞进option的text或value里导致混乱；
• htmlspecialchars()是为了防止XSS注入和特殊字符破坏HTML结构，一定要加上；
• 循环取出所有数据行，这样下拉框才会显示所有药品选项，而不是只有第一行。

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