如何在 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 元素讀取所選的值。