如何点击时获取下拉列表<option>元素的ID？多种尝试均失败

架构老林

2026-7-15

问题：获取下拉列表<option>元素的ID（无内联事件）

我尝试了多种方法获取下拉列表中<option>元素的ID，但要么不符合需求，要么无法生效。希望不使用内联点击事件，既能获取列表项ID，又能精简HTML并便于后续扩展。

我的JavaScript代码

function selectOption() {
  let selectedValue = dropdown.options[dropdown.selectedIndex].text;
  selectedValue.addEventListener('click', function() {
    let uniqueID = e.target.getAttribute('id');
    alert(uniqueID);
}

目标HTML代码

<select id = "dropdown" onchange = "selectOption()">
  <option>Select to scroll to an image</option>
  <option>Grounded</option>
  <option id = "Lain">Lain</option>
  <option id="Unfinished">Unfinished Character</option>
</select>

其他尝试方法

1. 内联`onClick`函数调用返回ID

JavaScript代码

function reply_click(clicked_id)
{
    alert(clicked_id);
}

HTML代码

<option id="free" onClick="replyClick(this.id)">Free</option>
<option id="basic" onClick="replyClick(this.id)">Basic</option>
<option id="premium" onClick="replyClick(this.id)">Premium</option>

2. 通过父元素子节点获取值并更新HTML

JavaScript代码

document.addEventListener('DOMContentLoaded', function getOption() {
    selectElement = document.querySelector('#select1');
    selectElement.addEventListener('click', returnElement() {
      output = selectElement.value;
      document.querySelector('.output').textContent = output;
}

HTML代码

<select id="select1">
   <option value="free">Free</option>
   <option value="basic">Basic</option>
   <option value="premium">Premium</option>
</select>