如何在无ID且数量不限的<select>标签中获取选中值？

我页面里有多个<select>标签，不想用ID区分，需要让action函数同时接收传入的account参数和当前<select>的选中值。

当前HTML代码（注意拼写错误：onchenge应为onchange）：

<select onchenge="action('account1')">
  <option value="1">op 1</option>
</select>

当前JavaScript代码：

function action(account) {
  const email = account
  const select = // 这里需要获取选中值
}

解决方法 #

方法一：直接传递当前元素（适合静态页面）

先修正HTML的拼写错误，然后在onchange调用时把当前select元素（this）和account参数一起传入：

<select onchange="action('account1', this)">
  <option value="1">op 1</option>
</select>

更新JS函数，通过第二个参数获取选中值：

function action(account, selectElement) {
  const email = account;
  const selectedValue = selectElement.value;
  // 这里可以使用两个参数进行后续操作
  console.log('账号:', email, '选中值:', selectedValue);
}

方法二：事件委托（适合大量/动态生成的select）

如果页面中的select是动态添加的，或者数量很多，事件委托更高效，无需给每个select单独绑定事件：

修改HTML，用data-account属性存储账号信息，去掉onchange属性：

<select data-account="account1">
  <option value="1">op 1</option>
</select>
<select data-account="account2">
  <option value="2">op 2</option>
</select>

编写JS代码，给父容器绑定change事件，通过事件对象获取目标元素的信息：

// 建议替换成实际的父容器（比如某个div），而非body，提升性能
document.body.addEventListener('change', function(e) {
  // 判断触发事件的是select元素
  if (e.target.tagName === 'SELECT') {
    const account = e.target.dataset.account;
    const selectedValue = e.target.value;
    // 调用action函数
    action(account, selectedValue);
  }
});

function action(account, selectedValue) {
  const email = account;
  console.log('账号:', email, '选中值:', selectedValue);
}

内容的提问来源于stack exchange，提问作者orielhaim