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

到目前为止，这是有效但idk如何使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);
}

<强>演示：

＆＃13;

const year = document.getElementById('year');

year.addEventListener('change', handleChange);

function handleChange() {
  let selected = this.options[this.selectedIndex].text;
  console.log(selected);
}

＆＃13;

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

＆＃13;

获取动态生成的下拉列表和更改函数的文本

1 个答案: