TypeScript中如何通过change监听器获取select选中选项

你原有代码存在一个基础类型错误：将<select>下拉元素错误断言为HTMLDivElement类型，下拉选择框对应的标准DOM类型为HTMLSelectElement，该类型内置了所有选中项相关的访问属性，不需要额外查找事件上的特殊字段。

具体实现方法 #

change事件触发时，事件对象的target属性指向触发事件的select元素本身，只要将其断言为正确的HTMLSelectElement类型，即可通过内置属性快速获取选中内容，常用属性如下：

• value：直接返回当前选中option的value属性值，是最常用的取值方式
• selectedOptions：返回所有选中option元素的集合，单选场景取索引0即可，多选场景可直接遍历该集合拿到所有选中项
• selectedIndex：返回当前选中项的索引，配合options属性也可定位到对应的option元素
• options：返回select下所有option元素的集合

修正后的完整代码 #

HTML部分无需调整，修正后的TypeScript代码如下：

window.addEventListener("load", handleLoad);

function handleLoad(): void {
  // 传入泛型指定querySelector返回的元素类型，替代之前的错误类型断言
  const select = document.querySelector<HTMLSelectElement>("#select1");
  // 增加空值判断，符合TS类型安全要求，避免元素不存在时报错
  if (!select) return;
  select.addEventListener("change", getSelectedOption);
}

function getSelectedOption(event: Event): void {
  // 将事件目标断言为HTMLSelectElement类型，获得完整的类型提示
  const selectEl = event.target as HTMLSelectElement;

  // 方式1：直接获取选中value
  const selectedValue = selectEl.value;
  console.log("选中项value：", selectedValue);

  // 方式2：获取完整选中option元素，可拿文本、自定义属性等内容
  const selectedOption = selectEl.selectedOptions[0];
  console.log("选中项文本：", selectedOption?.textContent?.trim());
  console.log("选中项value：", selectedOption?.value);

  // 方式3：通过选中索引获取option
  const selectedOptionByIndex = selectEl.options[selectEl.selectedIndex];
  console.log("索引方式获取的选中项：", selectedOptionByIndex);
}

注意：如果是多选下拉（给select标签添加multiple属性），直接遍历selectEl.selectedOptions即可拿到所有选中的选项，不需要额外改动逻辑。

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