選擇 JavaScript

array Python module | ast Python module | base64 Python module | code Python module | COM PHP module | dis Python module | DOM PHP module | Ev PHP module | Event PHP module | exp | html Python module | http Python module | imp Python module | io Python module | JavaScript | jQuery JavaScript library | os Python module | PDO PHP module | PS PHP module | pty Python module | Python Development | Python functions | re Python module | select Python module | SPL PHP module | StackOverflow | string Python module | time Python module | tty Python module | UI PHP module

Michael Zippo

當您將學習如何創建 Web 表單時，最常見的任務之一是從下拉菜單中獲取值。在本文中，我們將學習如何使用 JavaScript 獲取這些值。

讓我們快速了解如何使用 HTML 創建下拉元素。如果您迷路了，請關注我的 Codepen 。

要構建我們的下拉元素，我們需要使用 select 並使用嵌套在下面的 選項子項。選擇元素創建下拉菜單，並使用選項標籤在下拉菜單中設置這些選項。

讓我們創建一個我們最喜歡的水果（帶有表情符號）的下拉菜單。

我們添加了一個空的 h2，稍後我們將用 JavaScript 填充。此時可以選擇自己喜歡的水果：

這裡我們訪問屬性 options d ` 數組元素。接下來，我們選擇所選選項的索引並訪問其值或文本。

現在嘗試 console.log 兩個變量。這是怎麼回事？沒有。為什麼？因為我們的第一個元素有一個空值（它只是一個佔位符）。對第一個選項發表您的意見，然後再試一次。耶！我們使用 javascript 獲取值和文本。

使用 javascript 監聽下拉菜單的變化

我們需要使下拉菜單動態化，因為 JavaScript旨在對您頁面上的更改做出反應。考慮到這一點，我們將為水果元素分配一個 eventListener。

通過我們的eventListener，我們可以聽到下拉菜單的變化。請注意，您還可以通過運行 e.target.value 來獲取所選選項的值，您可能在另一個教程模塊中看到過。

我們在這裡。您現在可以選擇一個水果選項，JavaScript 將響應我們下拉菜單中的更改並相應地更新我們的 h2。成功法則

結論

如何展開價值觀是你學習網絡開發的一項基本技能。如果我們想要更新基本數據，向用戶展示選擇或只是對 DOM 中的變化做出“反應”。使用 JavaScript，我們可以立即獲得這些值