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

This question already has answers here:

How to get the element clicked (for the whole document)?
                                
                                    （8个答案）
                                
                        
                                2年前关闭。
            
                    
我有以下元素，每个元素都是一个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。

最佳答案

您只需要在change event回调函数中使用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>

关于javascript - 获取动态生成的下拉列表onchange和复用功能的文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49303850/