select框onchange事件获取option的id而非value，解决输出异常问题

问题原因分析 #

你的代码出现[object HTMLOptionElement]的异常结果，核心原因有两个：

1. 直接将HTMLOptionElement对象与字符串拼接时，会触发对象默认的toString()方法，返回对象的类型描述文本，而非你需要的属性值。
2. priceSelect是页面初始化时获取的固定选中项，不会随着select的选项变化而更新，事件触发时始终引用初始的那个option对象。

修改后的代码 #

HTML（无需改动）

<select id="price" class="form-control" name="price">
  <option id="1000" value="monthly">qqq</option>
  <option id="2000" value="quarterly">www</option>
  <option id="3000" value="semi_annually">eee</option>
  <option id="4000" value="annually">rrr</option>
</select>
<!-- 确保页面存在用于显示结果的元素 -->
<div id="display"></div>

JavaScript

const select = document.getElementById("price");
const display = document.getElementById("display");

const onPriceChange = () => {
  // 在事件内部实时获取当前选中的option元素
  const selectedOption = select.options[select.selectedIndex];
  // 访问option的id属性并拼接字符串
  display.textContent = `${selectedOption.id} Dollars`;
};

// 为select绑定change事件，触发处理函数
select.addEventListener('change', onPriceChange);

关键修改说明 #

• 在change事件函数内部获取选中项：确保每次触发事件都能拿到最新的选中option，而不是初始化时的固定值。
• 明确访问id属性：通过selectedOption.id获取目标属性值，避免直接使用option对象导致的类型描述输出。
• 补充事件绑定：原代码未实现事件绑定逻辑，添加addEventListener才能让select的变化触发处理函数。

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