获取动态生成的下拉列表 onchange 和重用功能的文本

Question

我有以下元素，每个元素都是一个 select 元素的 ID，该元素将有一个动态生成的下拉列表：

const year = document.getElementById('year');
const brand = document.getElementById('brand');
const version = document.getElementById('version');
const model = document.getElementById('model');

我有以下句柄函数，我想为它们中的每一个重复使用：

function handleChange() {
    let selected = year.options[year.selectedIndex].text;
    console.log(selected);
}

year.addEventListener('change', handleChange);

到目前为止一切正常，但我不知道如何让 handleChange() 获取 SELECT 元素的 ID。我尝试了以下代码，但它不正确。

function handleChange(e) {
    let id = e.target.id;
    let selected = id.options[id.selectedIndex].text;
    console.log(selected);
}

我正在努力远离 JQuery 这件事。

Answer 1

您只需要在更改事件回调函数中使用 this，在您的例子中是 handleChange 函数。

你的代码应该是这样的：

function handleChange() {
  let selected = this.options[this.selectedIndex].text;
  console.log(selected);
}

演示：

const year = document.getElementById('year');

year.addEventListener('change', handleChange);

function handleChange() {
  let selected = this.options[this.selectedIndex].text;
  console.log(selected);
}

<select id="year">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>

获取动态生成的下拉列表 onchange 和重用功能的文本

get text of dynamically generated dropdowns onchange and reuse function

html

javascript

dom

onchange