如何預選一個列表項使用 JavaScript？JavascriptWeb 開發前端技術

---

在本教程中，我們將學習如何使用 JavaScript 預選一個選擇列表項。它被賦予了一個 id 屬性，以便與 關聯以實現可訪問性目的，並且 name 屬性表示提交到伺服器的關聯資料點的名稱。 元素巢狀在 內部用於定義每個選單選項。每個 元素都有一個 value 屬性，其中包含在選擇該選項時提交到伺服器的資料值。如果未指定 value 屬性，則該值將設定為元素中包含的文字。您可以在 元素上包含 selected 屬性，以使其在頁面首次載入時成為預設選擇。您可以使用 元素的唯一屬性來控制它，例如 multiple 用於指定是否可以選擇多個選項。以及 size 用於指定一次應顯示多少個選項。它還接受大多數通用表單輸入屬性，如 required、disabled、autofocus 等。selectedIndex 屬性 select 元素的 selectedIndex 屬性允許您指定或返回列表中選定選項的索引。索引值從零開始。如果您從列表中選擇多個專案，則索引將作為列表中的第一個元素返回。如果列表有多個選項，則將返回第一個選定專案的索引。數字“-1”停用所有選項（如果有）。如果未選擇任何選項，則 selectedIndex 屬性返回 -1。首先，我們將一個 select 元素新增到 HTML。我們將為此 select 元素提供一個下拉列表 id。語法 document.getElementById("dropdown_menu").selectedIndex = "1"; 列表的 ID 透過 getElementById() 方法獲取，並且該列表的索引透過 selectedIndex 屬性設定為第二個索引。示例 在此示例中，我們使用 HTML 元素建立了兩個列表。第一個列表顯示電影型別選項，包括劇情、動作、恐怖、喜劇和黑色電影。第二個列表包含湯姆·克魯斯、布拉德·皮特、萊昂納多·迪卡普里奧、威爾·史密斯和道恩·強森等藝術家。如輸出所示，selectedIndex 屬性從第一個列表中選擇第三個索引，即恐怖片。根據輸出，從第二個列表中預選了第二個索引，即布拉德·皮特。索引值從 0 開始。

使用 JavaScript 中的value 屬性預選選擇列表

從第一個列表中選擇應用程式型別：

Instagram Snapchat Facebook Google WhatsApp

從第二個列表中選擇創始人：

Kevin Systrom Evan Spiegel Mark Zuckerberg Sergey Brin Brian Acton

© . All rights reserved.

使用 value 屬性 value 屬性指定元素的預設值，該值將在頁面載入時顯示。此屬性可以在表單控制元件和一些其他 HTML 元件中找到。HTML 中的 value 屬性和 JavaScript 中的 value 屬性對於某些控制元件的行為有所不同。value 屬性可以指定控制元件的初始值；但是，value 屬性包含控制元件的實際值。要在 JavaScript 中獲取或設定初始值，請使用 defaultValue 屬性。語法 var drop1 = document.getElementById("dropdown_menu"); drop1.value="Instagram"; getElementById() 方法用於獲取列表的 ID。將其儲存到變數 drop1 中。value 屬性用於選擇具有“Instagram”值的列表的索引。示例 在此示例中，我們使用 HTML 元素建立了兩個列表。在第一個列表中，您可以選擇 Instagram、Snapchat、Facebook、Google 和 WhatsApp 作為社交媒體應用程式。第二個列表顯示相應的應用程式創始人，例如 Kevin Systrom、Evan Spiegel、Mark Zuckerberg、Sergey Brin 和 Brian Acton。變數 drop1 獲取並存儲第一個列表的元素 id。然後將 drop1 值設定為“Instagram”以使用 value 屬性選擇該值。類似地，變數 drop2 獲取並儲存第二個列表的元素 id。然後使用 value 屬性將 drop2 元素設定為“Sergey Brin”。

使用 JavaScript 中的value 屬性預選選擇列表

從第一個列表中選擇應用程式型別：

Instagram Snapchat Facebook Google WhatsApp

從第二個列表中選擇創始人：

Kevin Systrom Evan Spiegel Mark Zuckerberg Sergey Brin Brian Acton

© . All rights reserved.

在本教程中，我們已經看到了兩種使用 JavaScript 預選選擇列表項的方法。第一種方法是使用 JavaScript 的 selectedIndex 屬性。第二種方法使用 JavaScript 的 value 屬性使用 DOM 技術。Shubham Vora 更新於：2022-09-14 135 次檢視 相關文章如何使用 JavaScript 以程式設計方式預選下拉列表？如何在 HTML 表單中預選下拉列表中的值？如何使用 JavaScript 設定列表項標記型別？如何使用 CSS 將影像作為列表項標記新增到列表中？如何在 HTML 中新增列表項？如何使用索引將專案插入 C# 列表中？如何使用索引從 C# 列表中刪除專案？如何使用 CSS 刪除無序列表項的縮排？如何使用 JavaScript 將影像設定為列表項標記？如何使用 JavaScript 設定列表項標記的位置？如何使用帶有 java 的 Selenium WebDriver 從下拉列表中選擇專案？如何在 Kotlin 中向列表新增專案？如何使用 JavaScript 建立下拉列表？如何在 JavaScript 中不使用 length 屬性獲取節點列表的最後一個專案？如何使用 CSS 在使用者將滑鼠懸停在列表項上時將游標更改為手形？啟動你的職業生涯透過完成課程獲得認證立即開始列印頁面上一頁下一頁廣告 熱門教程 Python 教程 Java 教程 C++ 教程 C 語言程式設計教程 C# 教程 PHP 教程 R 教程 HTML 教程 CSS 教程 JavaScript 教程 SQL 教程 熱門技術 雲計算教程 Amazon Web Services 教程 Microsoft Azure 教程 Git 教程 倫理駭客教程 Docker 教程 Kubernetes 教程 資料結構與演算法教程 Spring Boot 教程 軟體開發生命週期教程 Unix 教程 認證 商業分析認證 Java & Spring Boot 高階認證 資料科學高階認證 雲計算和 DevOps 高階認證 商業分析人工智慧和機器學習 DevOps 認證 遊戲開發認證 前端開發人員認證 AWS 認證培訓 Python 程式設計認證 編譯器和編輯器 線上 Java 編譯器 線上 Python 編譯器 線上 Go 編譯器 線上 C 編譯器 線上 C++ 編譯器 線上 C# 編譯器 線上 PHP 編譯器 線上 MATLAB 編譯器 線上 Bash 編譯器 線上 SQL 編譯器 線上 Html 編輯器 關於我們 | 我們的團隊 | 招聘 | 工作 | 聯絡我們 | 使用條款 | 隱私政策 | 退款政策 | Cookie 政策 | 常見問題解答 Tutorials Point 是一家領先的 Ed Tech 公司，致力於提供有關技術和非技術主題的最佳學習資料。© 版權所有 2024。保留所有權利。