如何使用 JavaScript 创建下拉列表？

在开始创建下拉列表之前，了解什么是下拉列表很重要。下拉列表是一个可切换的菜单，允许用户从多个选项中选择一个。此列表中的选项是在代码中定义的，并与一个函数相关联。当您单击或选择此选项时，该函数将触发并开始执行。

您在注册表单中经常会看到下拉列表，用于从下拉菜单中选择州或城市。下拉列表允许我们仅从项目列表中选择一个。查看下面的截图，了解下拉列表的外观-

创建下拉列表的重要注意事项

• <select> 标签与 <option> 标签一起用于在 HTML 中创建简单的下拉列表。之后，JavaScript 有助于对该列表执行操作。
• 除此之外，您还可以使用容器标签 <div> 来创建下拉列表。在其中添加下拉项和链接。本章将通过示例讨论每种方法。
• 您可以使用任何元素，如 <button>、<a> 或 <p> 来打开下拉菜单。

请参阅以下示例，了解如何使用不同方法创建下拉列表。

示例

使用 <select> 标签创建简单的下拉列表

这是一个创建简单易用的下拉列表的简单示例，无需使用任何复杂的 JavaScript 代码和 CSS 样式表。

复制代码

输出

通过运行上面的代码，您将获得与提供的屏幕截图相同的响应。它将包含一个包含教程站点列表的下拉菜单。

通过单击下拉列表中的项目来选择一项。

在下面的截图中可以看到，已选择的项目已显示在输出字段中。

可以使用其他方式创建下拉列表；请参阅下面的更多示例。

使用按钮和 div 标签创建下拉列表

在此示例中，我们将创建一个带有按钮的下拉列表，该按钮具有作为下拉菜单的项目列表。

复制代码

输出

通过单击此下拉按钮，您将获得一个项目列表，您需要从中选择一个项目。请参阅下面的屏幕截图

单击下拉列表按钮并隐藏列表。

多个下拉列表示例

在上面的示例中，我们创建了一个下拉列表。现在我们将创建一个包含各种在线技术学科教程列表（如 C、C++、PHP、MySQL 和 Java）的表单，并按类别进行了分类。当用户单击某个下拉按钮时，将向您显示其相应的下拉列表。

请参阅下面的示例，了解如何操作

输出

执行上面的代码后，将出现一个带有三个下拉按钮的表单。每个下拉按钮都有一个项目列表。

单击任何下拉按钮以查看项目列表。

假设您单击数据库教程下的 MongoDB，它将重定向到我们的 TpointTech MongoDB 教程。请参阅下面的输出

注意：如果您单击下拉窗口外部，下拉列表将消失。

通常，下拉菜单用于对同一类型的项目进行分类。即相似类型项目的列表。这与教程网站非常相似，该网站拥有我们 TpointTech 主题教程的多个列表。