javascript - select onchange 获取选项名称属性值

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>

我想要该选项名称和值数据。它按预期返回 value 数据，但返回 name 数据为 null。

我该怎么办？

感谢任何帮助。谢谢您

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);
}