下拉选择不自动填充文本框

Question

我有一个下拉框，目前可以进行三种不同的选择。根据选择的内容，我希望与组关联的组 ID 自动填充到下面的文本框中。我怎样才能得到它，这样才能满足我的需要？

目前，无论何时进行选择，我都会在我的 javascript 函数中的 var purchSelected = e.options[e.selectedIndex]; 行中获得一个 Cannot read property 'undefined' of undefined。

填充下拉列表的 SQL 查询：

$purchgroups = "SELECT [Purchasing_Group], [Purchasing_Group_ID]
        FROM Final_Structure
        GROUP BY [Purchasing_Group], [Purchasing_Group_ID]";
$purch = $dbh->query($purchgroups);
$purchDrop = $purch->fetchAll();

用于下拉列表的 HTML 和 PHP foreach 循环以引入值以及应自动填充值的文本框：

<select class="text ui-widget-content ui-corner-all item2" name="purchgroup" id="purchgroup" onChange="updateinput();">

    <option class="choice"
        value="0" selected>
        Purchasing Group
    </option>

    <?php foreach($purchDrop as $dropdown) { ?>

       <option class="choice" 
           value="<?php echo $dropdown['Purchasing_Group'];?>" .                 
           data-purchgroupid="<?php echo $dropdown['Purchasing_Group_ID'];?>">
       <?php echo $dropdown['Purchasing_Group'];?>
       </option>

   <?php } ?>
</select>

<label for="purchgroupid">Purchasing Group ID</label>
<input type="text" name="purchgroupid" id="purchgroupid" class="text ui-widget-content ui-corner-all" value="">

应在下拉值更改时调用的 Javascript 函数：

function updateinput() {
    var e = document.getElementById("purchgroup");
    var purchSelected = e.options[e.selectedIndex];
    console.log(purchSelected);

    document.getElementById("purchgroupid").value = purchSelected.dataset.purchgroupid;
}

Answer 1

data-purchgroupid 值在<option> 元素中的填充方式可能存在问题。我尝试在以下 CodePen 中复制您的问题，但没有收到任何错误：

https://codepen.io/justinthielman/pen/RqVERP

使用 Google Chrome DevTools 之类的工具来仔细检查加载的 HTML 文档中的选项元素。在 Google Chrome 中，加载页面，然后右键单击下拉元素并选择“检查”。如果data-purchgroupid 不是您所期望的，您将需要重新访问您的 SQL 查询。