The icon in the select option

In this article, we will create an icon in a select option with the help of JavaScript. We will use the font-awesome library to add icons in the select option.

Icon in <select> and <option> tag

The <select> tag is similar in functionality to unordered list <ul> or ordered list <ol> used in HTML to define a list and <option> tag is similar to the list item <li> which specifies the list item in a list.

The select and option tags are used to create drop-down menus. It is also called a pull-down list and drop-down list. They allow the user to select single or multiple choices from a list of options. All the choices are not shown on the screen, but they are visible when they pull the drop-down list. They are used to save space as only one item of the list is displayed.

It is a paired tag that starts with the opening <select> tag and ends with the closing tag </select>. This tag has to be used with the <option> tag. The <select> tag specifies that the text that follows is a list, and the <option> tag is used to specify the items of the list.

Syntax:

The various attributes used with the <select> tag are:

• Multiple: It is used to set the <select> tag to accept numerous options. By default, it can take a single option selected by the user. To select multiple options, a user has to press click while clicking the option.
• Name: It is used to specify a name for the pull-down list.
• Size: It is used to specify the number of choices shown simultaneously in a window.

The various attributes used with <option> tag are:

• Value: It is used to specify the value that is sent when the form is submitted. If the value attribute is omitted in the <option> tag, the contents of the <option> title are used.
• It is selected: It is used to specify the preselected choice when the form is initially loaded in a browser.

We can use the library given below to add an icon in the select option.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Let's take various examples of icons in the select option.

Example 1:

Explanation:

In the above example, we have created an icon in the drop-down list with the help of <select> and <option> tag. If we select a particular value from the <option> list value and select the element from the <option> list, it will display a selected icon from the selected options list.

Output:

The output of this example are given below:

Example 2:

Explanation:

In the above example, we have created an icon in the drop-down list with the help of <select> and <option> tag. If we select a particular value from the <option> list value and after selecting the element from the <option> list, it will display a selected option from the select list.

Output:

The output of this example is given below.