選擇 JavaScript

| | | | |

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

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

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

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

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

92151925 81da0a00 Ede7 11EA 9796 2a8a506c4a6e

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

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

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

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

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

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

92155152 88b74b80 Edec 11EA 8016 7f8911f26735

結論

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