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

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

当前，每当进行选择时，我都会在

var purchSelected=e.options[e.selectedIndex]处获得一个
无法读取未定义的属性'undefined'我的javascript函数中的行

填充下拉列表的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();

用于下拉列表和PHP foreach循环的HTML，用于将值与文本框一起引入，该文本框中的值应自动填充：

<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="">

在
元素中如何填充
数据purchgroupid
值可能存在问题。我试图在以下代码笔中复制您的问题，但未收到任何错误：


使用Google Chrome DevTools之类的工具仔细检查加载的HTML文档中的选项元素。在Google Chrome中，加载页面，然后右键单击下拉元素并选择“检查”。如果
数据purchgroupid
不是您所期望的，则需要重新访问SQL查询。
在进行更改后，我似乎仍然收到相同的未定义错误。我已更新了答案。如果你仍然有问题，你介意分享这个实时网站的URL吗？事实上，我只是能够找到它…我有一个类似的功能，它已经抓住了下拉值，只需要一个小的调整。我让事情变得比本来应该的困难多了。谢谢你的帮助！没问题！另外，我遗漏的一点可能没有效果，但您可以从此行末尾删除句点（
）：
value=”“
function updateinput() {
    var e = document.getElementById("purchgroup");
    var purchSelected = e.options[e.selectedIndex];
    console.log(purchSelected);

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