如何预选一个列表项使用 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 使用 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 在本教程中，我们已经看到了两种使用 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。保留所有权利。