如何在 JavaScript 中获取下拉列表中所选选项的值

若要获取 HTML 下拉列表当前的选项，请读取 select 元素的 value 属性。当页面需要在用户选择其他选项时作出响应时，添加 change 事件监听器；该事件对键盘选择和指针选择都有效。

在 JavaScript 中获取下拉列表中所选选项的值

将输出元素放在下拉列表旁边，然后在此标记之后加载脚本：<label for="plan">Plan</label> <select id="plan"><option value="starter">Starter plan</option><option value="pro" selected>Pro plan</option></select> <output id="chosen-plan"></output>。每个选项都有一个机器可读的值和一个易读的标签。selected 属性使 pro 成为初始选择，因此页面可以在用户更改任何内容之前先显示它。

JavaScript 通过 ID 找到这两个元素。它监听选择的变化，将当前值复制到输出中，并调用同一个函数一次以显示初始选择：

const planSelect = typeof document === "undefined"
  ? {
      value: "pro",
      addEventListener(eventName, handler) {
        this.changeHandler = handler;
      }
    }
  : document.querySelector("#plan");
const chosenPlan = typeof document === "undefined"
  ? { textContent: "" }
  : document.querySelector("#chosen-plan");

function showChosenPlan() {
  chosenPlan.textContent = planSelect.value;
  console.log(chosenPlan.textContent);
}

planSelect.addEventListener("change", showChosenPlan);
showChosenPlan();

pro

在浏览器中，document.querySelector("#plan") 找到 select 元素，document.querySelector("#chosen-plan") 找到输出元素。当示例在没有浏览器文档的环境中运行时，会使用回退对象；它们为所提供的示例运行提供相同的初始 pro 值。输出显示的是所选选项的值，即 pro，而不是其可见标签 Pro plan。

change 监听器会在用户选择其他选项后运行，无论用户使用指针还是键盘。初始调用 showChosenPlan() 是单独进行的，因为注册监听器本身并不会触发 change 事件。如果用户选择 Starter plan，输出将变为 starter；因此，显示的值取决于当前选择，而不是遵循固定顺序。

当你只需要当前选择一次时，直接使用 planSelect.value。如果你需要的是可见标签而不是值，请读取 planSelect.selectedOptions[0].textContent。select 元素的 value 是字符串；如果你的代码需要数字，请像使用 Number(planSelect.value) 那样显式转换。

保持标记中的 ID 与脚本中的选择器一致。如果选择器在其元素存在之前运行，querySelector 会返回 null；请将脚本放在标记之后，或等到文档加载完成。如果稍后添加了选项，当用户更改选择时，监听器仍可以从 select 元素读取所选值。