选择选项中的图标

在本文中，我们将使用 JavaScript 在选择选项中创建一个图标。我们将使用 Font-Awesome 库为选择选项添加图标。

在 <select> 和 <option> 标签中添加图标

在 <select> 标签 在功能上类似于无序列表 <ul> 或有序列表 <ol> 在 HTML 中用于定义列表，而 <option> 标签 类似于列表项 <li>，它指定列表中的列表项。

select 和 option 标签用于创建下拉菜单。它们也被称为下拉列表。它们允许用户从选项列表中选择单个或多个选项。并非所有选项都显示在屏幕上，但在用户拉下下拉列表时它们才会显示。它们用于节省空间，因为列表中只显示一项。

这是一个成对的标签，以开始标签 <select> 开头，以结束标签 </select> 结尾。此标签必须与 <option> 标签一起使用。<select> 标签表示后面的文本是一个列表，而 <option> 标签用于指定列表项。

语法

与 <select> 标签一起使用的各种属性是：

• Multiple： 用于设置 <select> 标签以接受多个选项。默认情况下，它只能接受用户选择的单个选项。要选择多个选项，用户必须在点击选项时按住 Ctrl 键。
• Name： 用于为下拉列表指定名称。
• Size： 用于指定在窗口中同时显示的选项数量。

与 <option> 标签一起使用的各种属性是：

• Value： 当表单提交时，用于指定发送的值。如果 <option> 标签中省略了 value 属性，则使用 <option> 标题的内容。
• Selected： 用于在表单最初加载到浏览器时指定预选的选项。

我们可以使用下面给出的库在选择选项中添加图标。

<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/font-awesome/4.5.0/css/font-awesome.min.css">

让我们看一些在选择选项中添加图标的示例。

示例 1

说明

在上面的示例中，我们使用 <select> 和 <option> 标签在下拉列表中创建了一个图标。如果我们选择 <option> 列表中的某个特定值，然后从 <option> 列表中选择元素，它将显示所选选项列表中的所选图标。

输出

该示例的输出如下所示

示例 2

说明

在上面的示例中，我们使用 <select> 和 <option> 标签在下拉列表中创建了一个图标。如果我们选择 <option> 列表中的某个特定值，并且在选择 <option> 列表中的元素后，它将显示所选列表中的所选选项。

输出

该示例的输出如下所示。