代码之家  ›  专栏  ›  技术社区  ›  Rataiczak24

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

  •  0
  • Rataiczak24  · 技术社区  · 6 年前

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

    目前,只要做了选择,我就会得到一个 Cannot read property 'undefined' of undefined var purchSelected = e.options[e.selectedIndex]; 我的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="">
    

    应在下拉列表值更改时调用的javascript函数:

    function updateinput() {
        var e = document.getElementById("purchgroup");
        var purchSelected = e.options[e.selectedIndex];
        console.log(purchSelected);
    
        document.getElementById("purchgroupid").value = purchSelected.dataset.purchgroupid;
    }
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   Justin T.    6 年前

    可能有一个问题是 data-purchgroupid 值正在 <option> 元素.我试图用下面的代码笔复制您的问题,但没有收到错误:

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

    使用类似google chrome devtools的工具来仔细检查加载的html文档中的选项元素。在google chrome中,加载页面,然后右键单击下拉元素并选择“inspect”。如果 数据purchGroupID 不是您期望的那样,您将需要重新访问SQL查询。