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>

我想要那个选项name和value数据。它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);
}