Home
Library
Online Compilers
Jobs
Whiteboard
Tools
Articles
Write & Earn
Courses
Certifications
Menu
Categories
Login
Switch theme
Category
Java
JSP
iOS
HTML
Android
Python
C Programming
C++ Programming
C#
PHP
CSS
Javascript
jQuery
SAP
SAP HANA
Data Structure
RDBMS
MySQL
Mathematics
8085 Microprocessor
Operating System
Digital Electronics
Analysis of Algorithms
Mobile Development
Front End
Web Development
Selenium
MongoDB
Computer Network
General Topics
Library
Courses
Certifications
Login
Menu
Show search
SQL
HTML
CSS
Javascript
Python
Java
C
C++
PHP
Scala
C#
Tailwind CSS
Node.js
MySQL
MongoDB
PL/SQL
Swift
Bootstrap
R
Machine Learning
Blockchain
Angular
React Native
Computer Fundamentals
Compiler Design
Operating System
Data Structure and Algorithms
Computer Network
DBMS
Excel
熱門類別
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學
精選閱讀
UPSC IAS 考試筆記
開發者最佳實踐
問答
有效的簡歷撰寫
人力資源面試問題
計算機詞彙表
名人錄
如何預選一個
列表項使用 JavaScript？Javascript網頁開發前端技術
在本教程中，我們將學習如何使用 JavaScript 預選選擇列表項。它被賦予一個 id 屬性以便於輔助功能與 <label> 關聯，而 name 屬性則表示提交到伺服器的關聯資料點的名稱。巢狀在 <select> 內的 <option> 元素用於定義每個選單選項。每個 <option> 元素都有一個 value 屬性，其中包含在選擇該選項時提交到伺服器的資料值。如果未指定 value 屬性，則該值設定為元素中包含的文字。您可以在 <option> 元素上包含 selected 屬性，使其在頁面首次載入時成為預設選擇。您可以使用 <select> 元素的唯一屬性來控制它，例如 multiple 用於指定是否可以選擇多個選項。以及 size 用於指定一次應顯示多少個選項。它還接受大多數通用表單輸入屬性，例如 required、disabled、autofocus 等。selectedIndex 屬性 select 元素的 selectedIndex 屬性允許您指定或返回列表中選定選項的索引。索引值從零開始。如果您從列表中選擇多個專案，則索引將作為列表中的第一個元素返回。如果列表有多個選項，則將返回所選第一個專案的索引。數字“-1”會停用所有選項（如果有）。如果沒有選擇任何選項，則 selectedIndex 屬性返回 -1。首先，我們將一個 select 元素新增到 HTML。我們將為此 select 元素提供一個下拉列表 id。語法 document.getElementById("dropdown_menu").selectedIndex = "1"; 透過 getElementById() 方法獲取列表的 ID，並透過 selectedIndex 屬性將該列表的索引設定為第二個索引。示例在此示例中，我們使用 HTML <select> 元素建立了兩個列表。第一個列表顯示電影型別的選項，包括劇情、動作、恐怖、喜劇和黑色電影。第二個列表包括湯姆·克魯斯、布拉德·皮特、萊昂納多·迪卡普里奧、威爾·史密斯和巨石強森等藝術家。如輸出所示，selectedIndex 屬性從第一個列表中選擇第三個索引，即恐怖片。根據輸出，第二個列表中預選了第二個索引，即布拉德·皮特。索引值從 0 開始。<html> <body> <h3>使用 JavaScript 中的 <i>value 屬性</i> 預選選擇列表</h3> <p id="root">從第一個列表中選擇應用程式型別：</p> <select id="dropdown1" name="dropdown1" class="form-control"> <option value="Instagram">Instagram</option> <option value="Snapchat">Snapchat</option> <option value="Facebook">Facebook</option> <option value="Google">Google</option> <option value="WhatsApp">WhatsApp</option> </select> <p id="root">從第二個列表中選擇創始人：</p> <select id="dropdown2" name="dropdown2" class="form-control"> <option value="Kevin Systrom"> Kevin Systrom </option> <option value="Evan Spiegel"> Evan Spiegel </option> <option value="Mark Zuckerberg"> Mark Zuckerberg </option> <option value="Sergey Brin"> Sergey Brin </option> <option value="Brian Acton"> Brian Acton </option> </select> <script> var drop1 = document.getElementById("dropdown1"); drop1.value = "Instagram"; var drop2 = document.getElementById("dropdown2"); drop2.value = "Sergey Brin"; </script> </body> </html> 使用 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 <select> 元素建立了兩個列表。在第一個列表中，您可以選擇 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”。<html> <html> <body> <h3>使用 JavaScript 中的 <i>value 屬性</i> 預選選擇列表</h3> <p id="root">從第一個列表中選擇應用程式型別：</p> <select id="dropdown1" name="dropdown1" class="form-control"> <option value="Instagram">Instagram</option> <option value="Snapchat">Snapchat</option> <option value="Facebook">Facebook</option> <option value="Google">Google</option> <option value="WhatsApp">WhatsApp</option> </select> <p id="root">從第二個列表中選擇創始人：</p> <select id="dropdown2" name="dropdown2" class="form-control"> <option value="Kevin Systrom"> Kevin Systrom </option> <option value="Evan Spiegel"> Evan Spiegel </option> <option value="Mark Zuckerberg"> Mark Zuckerberg </option> <option value="Sergey Brin"> Sergey Brin </option> <option value="Brian Acton"> Brian Acton </option> </select> <script> var drop1 = document.getElementById("dropdown1"); drop1.value = "Instagram"; var drop2 = document.getElementById("dropdown2"); drop2.value = "Sergey Brin"; </script> </body> </html>在本教程中，我們已經看到了兩種使用 JavaScript 預選選擇列表項的方法。第一種方法是使用 JavaScript 的 selectedIndex 屬性。第二種方法使用 JavaScript 的 value 屬性使用 DOM 技術。Shubham Vora 更新於：2022年9月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。保留所有權利。
©
. All rights reserved.
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學