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

我有一个html页面：

函数getName（val）
{
警报（val.value）；
警报（val.getAttribute（'name'））；
}

数据1
数据2
数据3

在函数

getName

中，参数

select

指的是

select

元素，而不是所选的

选项。使用
selectedIndex
获取所选的
选项
，然后使用
getAttribute


函数getName（选择）{
//您可以像以前一样获得价值
var值=select.value；
console.log（值）；
//这就是我们的名字
var selectedOption=select.options[select.selectedIndex]；
var name=selectedOption.getAttribute（'name'）；
console.log（名称）；
}

数据1
数据2
数据3
在函数
getName
中，参数
select
指的是
select
元素，而不是所选的
选项。使用
selectedIndex
获取所选的
选项
，然后使用
getAttribute


函数getName（选择）{
//您可以像以前一样获得价值
var值=select.value；
console.log（值）；
//这就是我们的名字
var selectedOption=select.options[select.selectedIndex]；
var name=selectedOption.getAttribute（'name'）；
console.log（名称）；
}

数据1
数据2
数据3

函数getName（）
{
警报（事件、目标、值）；
警报（event.target.selectedOptions[0].getAttribute（'name'）；
}

数据1
数据2
数据3

函数getName（）
{
警报（事件、目标、值）；
警报（event.target.selectedOptions[0].getAttribute（'name'）；
}

数据1
数据2
数据3

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

在我看来，您不应该在HTML中使用类似

onchange=“getName（**this**）”的内容。您应该通过Javascript将函数附加到
select
元素

出于演示目的，我们将在
select
元素中添加一个id，以便在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>

这是一种更结构化、更干净的解决问题的方法

希望你学到了新东西
 我还想提出一个不同的答案，我认为它突出了更好的web编程实践

在我看来，您不应该在HTML中使用类似
onchange=“getName（**this**）”的内容。您应该通过Javascript将函数附加到
select
元素

出于演示目的，我们将在
select
元素中添加一个id，以便在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>

这是一种更结构化、更干净的解决问题的方法

希望你学到了新东西