Question

我有一个下拉框，当前有三个可以选择的选项。根据选择的内容，我希望与组关联的组ID在下面的文本框中自动填充。我怎么得到它，所以这就是我需要的？

当前，每当进行选择时，我的javascript函数中的Cannot read property 'undefined' of undefined行都会得到一个var purchSelected = e.options[e.selectedIndex];。

填充下拉列表的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查询。

下拉选择无法自动填充文本框

1 个答案: