根据下拉选择填充文本字段

Question

我知道 Stack Overflow 上有很多这样的问题，但我真的需要一些与我正在做的事情更相关的东西......所以这就是我发布这个问题的原因。

我有一个带有 PHP 的 HTML 表单，它从 MSSQL 数据库中提取数据以填充下拉框。一旦我从下拉框中输入 select 名称，我希望能够填充联系信息文本框。到目前为止，如果我 select 一个特定的供应商，供应商名称会自动输入到名称、电子邮件和 Phone 号码字段中。但是，我想在文本字段中输入不同的属性，而不是供应商名称本身。我该怎么做？

我的数据库中包含我要导入的姓名、电子邮件和 phone 号码的字段名为 MR_POC_N、MR_POC_E 和 MR_POC_P

此外，您看到的 "MR_Name" 是包含所有供应商名称的字段，仅供参考。请帮忙！

这是 HTML 下拉菜单的代码：

<select name="vendor_dropdown" id="ven" onChange="updateinput();">
    <option value="">Choose a Vendor</option>
        <?php foreach($users->fetchAll() as $user): ?>
            <option><?php echo $user['MR_Name'];?></option>
        <?php endforeach; ?>
</select>

这是我在JS中的更新输入功能。我知道这是关闭的，但正在寻找某种方向，因为我不是 JS 中最好的：

function updateinput() {


    var e = document.getElementById("ven");
        var venSelected = e.options[e.selectedIndex].value;

        document.getElementById("name").value=venSelected;
        document.getElementById("email").value=venSelected;
        document.getElementById("tel").value=venSelected;
    }

这是我的联系信息代码：

<table align="center">
    <tr>
        <td align="right">Name:</td>
        <td><input class="textbox" type="text" id="name" name="name"></td>
    </tr>
    <tr>
        <td align="right">Email:</td>
        <td><input class="textbox" type="email" id="email" name="email"></td>
    </tr>
    <tr>
        <td align="right">Phone Number:</td>
        <td><input class="textbox" type="tel" id="tel" name="number"></td>
    </tr>
</table>

Answer 1

由于您要填充的数据已经在您的“$user”变量中，实现您想要执行的操作的最佳方法是使用数据属性。

这很简单，您将数据存储在选项的属性中，然后您可以从您的 js 访问这些值，下面是您的操作方法：

<select name="vendor_dropdown" id="ven" onChange="updateinput();">
    <option value="">Choose a Vendor</option>
        <?php foreach($users->fetchAll() as $user): ?>
            <option
                    data-name="<?php echo $user['MR_POC_N'];?>"
                    data-email="<?php echo $user['MR_POC_E'];?>"
                    data-phone="<?php echo $user['MR_POC_P'];?>"
            >
                <?php echo $user['MR_Name'];?>
            </option>
        <?php endforeach; ?>
</select>

这样您的所有数据都可以从 js 端以程序方式访问:

var venSelected = e.options[e.selectedIndex];

document.getElementById("name").value = venSelected.dataset.name

这里有一个 link 多谈一点数据属性，它永远不会伤害 ;)

https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes

根据下拉选择填充文本字段

Populate Textfields Depending on Dropdown Selection

html

javascript

php

sql-server

auto-populate