Drop Down multiple selection lists

HTML Drop Down or multiple selection lists:

Drop Down multiple selection lists: In HTML drop down lists or multiple selection lists can be used in a variety of ways e.g. some use these lists for menu items while the most fitting purpose of these lists remains for restricting user input both for accuracy and standardizing. Selection lists do help in making things look nice while they might have raw data in the backend. A sample code for the Selection List or drop down list is shown below:

Selection List Sample Code

<label>When do you go for jogging?</label>

        <select id = “jogging”>

          <option value = “morning”>Morning</option>

          <option value = “evening”>Evening</option>

          <option value = “afternoon”>Afternoon</option>

          <option value = “sunday”>Sundays</option>

          <option value = “weekdays”>Weekdays</option>

          <option value = “holidays”>Holidays</option>

          <option value = “never”>Never</option>



The above code gives the below output:

Drop down and multiple selection list

How to build a selection list step by step:

Step 1: Add a label to your list; it is an optional field. Let us add one to our list:

<label> My first Selection List</label>

Step 2: Initiate the selection tags:

<select> </select>

Step 3: let’s add some values to the list that shall drop down upon user click:

<option value = “1st option”> Option 1</option>

<option value = “2nd option”> Option 2</option>

<option value = “3rd option”> Option 3</option>


Let us put our code in some browser and see what happens:

My first selection list

That’s it. We got our very first selection list working. 

Leave a Reply