Question

我正在尝试创建一个简单的用户信息表单。在我的表单中，我有一个选择元素，其中包含四个选项。这些选项包含四个数据属性，其中包含一些用户信息。在选择下方，我有四种输入类型，它们代表我在数据属性之一选择即可。我想要发生的是当我选择每个用户获取数据属性并填写输入元素时。任何人都知道如何实现这一目标？我想在简单的JS中。我尝试过使用onchange事件，但没有运气。有人能为我提供JS代码吗？我会添加很多用户，所以如果有人可以使用（this）帮助我使用代码，而不是选择具有id的用户，我会很感激。

感谢。

HTML：

<form id="usersInfo" action="#" method="post" onsubmit="return false">

        <label>User Information</label>
        <select id="firstSelect" onchange="usersFunction()">
            <option value="10" data-name="Name One" data-surname="Surname One" data-email="Email One" data-country="Country One">User One</option>
            <option value="20" data-name="Name Two" data-surname="Surname Two" data-email="Email Two" data-country="Country Two">User Two</option>
            <option value="30" data-name="Name Three" data-surname="Surname Three" data-email="Email Three" data-country="Country Three">User Three</option>
            <option value="40" data-name="Name Four" data-surname="Surname Four" data-email="Email Four" data-country="Country Four">User Four</option>
        </select>

        <input type="text" id="userName" placeholder="User Name">
        <input type="text" id="userSurname" placeholder="User Surname">
        <input type="text" id="userEmail" placeholder="User Email">
        <input type="text" id="userCountry" placeholder="User Country">

    </form>

的Javascript

function usersFunction() {
    var x = document.querySelector("#firstSelect");

    var dataName = x.getAttribute("data-name");
    var dataSurname = x.getAttribute("data-surname");
    var dataEmail = x.getAttribute("data-email");
    var dataCountry = x.getAttribute("data-country");

    var userName = document.querySelector("#userName");
    var userSurname = document.querySelector("#userSurname");
    var userEmail = document.querySelector("#userEmail");
    var userCountry = document.querySelector("#userCountry");

    userName.value = dataName;
    userSurname.value = dataSurname;
    userEmail.value = dataEmail;
    userCountry.value = dataCountry;

}

Answer 1

问题在于您尝试从data-*元素中读取select属性，但它们位于选项元素上。您需要找到option元素，然后从那里读取data-*属性。你正在做其他一切正确的事情，尽管有一个调整，我建议我在下面描述。

要查找所选选项，请在选择中获取选项，然后查找selected属性为true的人：

var options = document.querySelectorAll("#firstSelect option");
var selected;
var n;
for (n = 0; !selected && n < options.length; ++n) {
    if (options[n].selected) {
        selected = options[n];
    }
}
if (!selected) {
    return; // None selected -- or you might choose to use the first one in this case
}
var dataName = selected.getAttribute("data-name");
var dataSurname = selected.getAttribute("data-surname");
var dataEmail = selected.getAttribute("data-email");
var dataCountry = selected.getAttribute("data-country");

实例：

＆＃13;

function usersFunction() {
  var options = document.querySelectorAll("#firstSelect option");
  var selected;
  var n;
  for (n = 0; !selected && n < options.length; ++n) {
    if (options[n].selected) {
      selected = options[n];
    }
  }
  if (!selected) {
    return; // None selected -- or you might choose to use the first one in this case
  }
  var dataName = selected.getAttribute("data-name");
  var dataSurname = selected.getAttribute("data-surname");
  var dataEmail = selected.getAttribute("data-email");
  var dataCountry = selected.getAttribute("data-country");

  var userName = document.querySelector("#userName");
  var userSurname = document.querySelector("#userSurname");
  var userEmail = document.querySelector("#userEmail");
  var userCountry = document.querySelector("#userCountry");

  userName.value = dataName;
  userSurname.value = dataSurname;
  userEmail.value = dataEmail;
  userCountry.value = dataCountry;

}

＆＃13;

<form id="usersInfo" action="#" method="post" onsubmit="return false">

  <label>User Information</label>
  <select id="firstSelect" onchange="usersFunction()">
    <option value="10" data-name="Name One" data-surname="Surname One" data-email="Email One" data-country="Country One">User One</option>
    <option value="20" data-name="Name Two" data-surname="Surname Two" data-email="Email Two" data-country="Country Two">User Two</option>
    <option value="30" data-name="Name Three" data-surname="Surname Three" data-email="Email Three" data-country="Country Three">User Three</option>
    <option value="40" data-name="Name Four" data-surname="Surname Four" data-email="Email Four" data-country="Country Four">User Four</option>
  </select>

  <input type="text" id="userName" placeholder="User Name">
  <input type="text" id="userSurname" placeholder="User Surname">
  <input type="text" id="userEmail" placeholder="User Email">
  <input type="text" id="userCountry" placeholder="User Country">

</form>

＆＃13;

请注意，由于选择了第一个选项，因此显示没有最初选择选项的下拉选项，如果您没有通过替换{{{{{ 1}}上面的注释：

if

如果你这样做，你可以在页面加载时运行该功能，以便第一个选项的信息自动填入字段。

附注：当您 按其ID查找某些内容时，您可以使用selected = selected || option[0];而不是document.getElementById("id")。

选择数据属性并将其添加到普通js

1 个答案: