Question

我有一个html页面：

function getName(val)
{
  alert(val.value);
  alert(val.getAttribute('name'));
}

<select onchange="getName(this)">
  <option name="1" value="data1">Data 1</option>
  <option name="2" value="data2">Data 2</option>
  <option name="3" value="data3">Data 3</option>
</select>

我想要该选项name和value的数据。它按预期返回value数据，但返回name的{{1}}数据。

我该怎么办？

感谢您的帮助。谢谢

Answer 1

函数getName中的参数select引用了select元素，但未引用所选的option。使用selectedIndex获取选定的option，然后使用getAttribute

function getName(select) {
  // You can get the value like you did 
  var value = select.value;
  console.log(value);

  // And here we get the name
  var selectedOption = select.options[select.selectedIndex];
  var name = selectedOption.getAttribute('name');
  console.log(name);
}

<select onchange="getName(this)">
  <option name="1" value="data1">Data 1</option>
  <option name="2" value="data2">Data 2</option>
  <option name="3" value="data3">Data 3</option>
</select>

您还可以执行以下操作（更清楚）

function getName(select) {
  var selectedOption = select.options[select.selectedIndex];
  var value = selectedOption.getAttribute('value');
  var name = selectedOption.getAttribute('name');
  console.log(value, name);
}

Answer 2

function getName()
{
       alert(event.target.value);
       alert(event.target.selectedOptions[0].getAttribute('name'));
}

 <select onchange="getName()">
        <option name="1" value="data1">Data 1</option>
        <option name="2" value="data2">Data 2</option>
        <option name="3" value="data3">Data 3</option>
    </select>

Answer 3

我还想提出一个不同的答案，我认为它突出了更好的Web编程实践。

我认为，您不应在HTML中使用类似onchange="getName(**this**)"之类的东西。您应该通过Javascript将函数附加到select元素上。

出于演示目的，我们将 id 添加到select元素中，以便我们可以在DOM中快速找到它。

<select id="mySelect">
  <option name="1" value="data1">Data 1</option>
  <option name="2" value="data2">Data 2</option>
  <option name="3" value="data3">Data 3</option>
</select>

接下来，我们编写Javascript

// When the page is loaded...
document.addEventListener("DOMContentLoaded", function(event) {
  // Find your select...
  var mySelect = document.getElementById("mySelect");

  // Attach the function to the "onChange" event.
  mySelect.addEventListener("change", function(event) {
    // Retrieve the select element from the event.
    var select = event.target;
    var selectedOption = select.options[select.selectedIndex];
    var value = selectedOption.getAttribute('value');
    var name = selectedOption.getAttribute('name');
    console.log(value, name);
  });
});

这是一种解决问题的更结构化和简洁的方法。

希望您学到了一些新东西！

选择onchange获取选项名称属性值

3 个答案: