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。保留所有权利。
数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学