在 onchange 事件中使用数据选择器（将选项属性传递给选择 onchange） - Javascript

当你在你的页面上使用下拉选择列表的时候，有时你需要在选项被选择后执行一些操作。这时，你可以使用JavaScript的onchange事件来在选项选择发生变化时执行特定的代码。

在HTML中定义下拉选择列表

首先，我们需要在HTML页面中定义下拉选择列表，使用<select>标签和<option>标签来创建选项。如下所示：

<select onchange="myFunction()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

在上面的代码中，我们使用onchange属性来指定当该下拉选择列表的选项改变时，应该执行的JavaScript函数myFunction()。<option>标签中的value属性指定了每个选项的值。

在JavaScript中定义 onchange 事件

在JavaScript中，我们可以通过addEventListener()方法来定义onchange事件。如下所示：

const selectElement = document.querySelector('select');

selectElement.addEventListener('change', (event) => {
  console.log(`${event.target.value} selected.`);
});

在上面的代码中，我们首先通过querySelector()方法选择了<select>元素。然后，我们使用addEventListener()方法来为其添加change事件，监听选项的选择。在事件处理函数中，我们使用event.target.value来获取所选选项的value属性值。

传递选项属性给 onchange

有时候，我们需要将所选选项的属性值（即value属性）传递给onchange事件。可以使用以下方式来实现：

<select onchange="myFunction(this.options[this.selectedIndex].value)">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

在这个例子中，我们将this.options[this.selectedIndex].value传递给了myFunction()函数。它使用了this.options来引用下拉列表的所有<option>元素,使用 this.selectedIndex来获取所选选项的索引，从而获得所选选项的值。

结论

在JavaScript中，我们可以使用onchange事件来监听下拉选项的选择。我们可以通过addEventListener()方法来为其添加change事件并定义事件处理函数。此外，我们还可以使用this.options[this.selectedIndex].value来将所选选项的属性值传递给onchange事件。