Question

我的代码中有一个表单，其中包含一些输入字段和一个选择字段。 select字段由db中的表填充，该表还包含客户端名称和电子邮件。

更改选择字段时，必须将客户端名称和电子邮件放在正确的输入字段中。我尝试了一些方法，但尚未找到合适的方法。

这是我的代码：

    <table>
        <tr><td>Company</td><td>
        <select id="namelist" name="namelist" onchange="updateinput()">
        <?php 
        $result = mysqli_query($con, "SELECT * FROM clients ORDER BY ID");
        while($row1 = mysqli_fetch_array($result))
        {
            $value = $row1['Value'];
            $name = $row1['Name'];
            echo"<option value='$value'>$name<br>"; } ?>
        </select></td></tr>
        <tr><td>Name of contact</td><td>
        <input required id="namecontact" name="namecontact" type="text" placeholder="Client name"></td></tr>
        <tr><td>E-Mail contactpersoon</td><td>
        <input required id="email" name="email" type="text" placeholder="E-Mail"></td></tr>
</table>

提前多多谢谢

Answer 1

将客户的电子邮件和姓名保留在data-*个属性中，以便您可以在onchange事件中检索这些值。

getAttribute()返回元素上指定属性的值。如果给定属性不存在，则返回的值将为null或“”（空字符串）

试试这个：

function updateinput(e) {
  var selectedOption = e.options[e.selectedIndex];
  document.getElementById('namecontact').value = selectedOption.getAttribute('data-name');
  document.getElementById('email').value = selectedOption.getAttribute('data-email');

}

<table>
  <tr>
    <td>Company</td>
    <td>
      <select id="namelist" name="namelist" onchange="updateinput(this)">
        <option>Select data</option>
        <option data-email='abc1@abc.com' data-name='abc1 xyz' value='test'>test1</option>

        <option data-email='abc2@abc.com' data-name='abc2 xyz' value='test'>test2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Name of contact</td>
    <td>
      <input required id="namecontact" name="namecontact" type="text" placeholder="Client name">
    </td>
  </tr>
  <tr>
    <td>E-Mail contactpersoon</td>
    <td>
      <input required id="email" name="email" type="text" placeholder="E-Mail">
    </td>
  </tr>
</table>

Fiddle here

Answer 2

首先，您可以使用data-email元素中的option属性存储电子邮件值，假设name是选项中的文本

<table>
    <tr><td>Company</td><td>
    <select id="namelist" name="namelist" onchange="updateinput()">
    <?php 
    $result = mysqli_query($con, "SELECT * FROM clients ORDER BY ID");
    while($row1 = mysqli_fetch_array($result))
    {
        $value = $row1['Value'];
        $name = $row1['Name'];
        $email = $row1['Email'];
        echo"<option data-email='' value='$value'>$name<br>"; } ?>
    </select></td></tr>
    <tr><td>Name of contact</td><td>
    <input required id="namecontact" name="namecontact" type="text" placeholder="Client name"></td></tr>
    <tr><td>E-Mail contactpersoon</td><td>
    <input required id="email" name="email" type="text" placeholder="E-Mail"></td></tr>
</table>

然后您可以为选择

设置更改事件处理程序

var namelist = document.getElementById('namelist');
namelist.addEventListener('change', function() {
  var option = namelist.options[namelist.selectedIndex];
  document.getElementById('namecontact').value = option.value;
  document.getElementById('email').value = option.dataset.email;
});

JavaScript OnChange选择值到输入字段

2 个答案: