How to create HTML select dropdown with options
The <select> tag in HTML is used to create a dropdown that enables users to select an option from the pre-defined set of values.
The text visible to the user can be different to the text in the value attribute of <select> tag. This is how you can create a dropdown, e.g.
This is how you can create a dropdown, e.g.
<select id="selectID"> <option value=”GR”>Green</option> <option value=”YE”>Yellow</option> <option value=”BL”>Black</option> </select>
- The dropdown is created by using the <select> tag.
- Inside the <select> tag, you can create options by using the <option> tag.
- Create as many options as you want.
- You may use the value attribute in the <option> tag to access the selected option in scripting language like PHP, JS, jQuery etc.
You may also specify a CSS class instead of using ID to style the select–option dropdown.
In the following section, I will show you examples of using HTML dropdown from selecting the single option to using it with JavaScript / jQuery. The example also includes styling the select HTML tag with CSS/CSS3, and Bootstrap framework. Let me start with a basic example to create a simple dropdown.
An example of creating a simple select-option
In this example, the <select> tag is used to create a dropdown with three options. See the demo online by clicking the link or image below:
The following markup is used in the above example for creating HTML select:
<select id="selectvalue"> <option>5</option> <option>10</option> <option>15</option> <option>20</option> <option>25</option> </select>
Using the value attribute
You may use the value attribute in <select> tag. As mentioned earlier, the value can be different to the text displayed to the users. For example, you can show complete country or color names to the users while using a shortcode in the value attribute.
You may access this value in a scripting language like PHP or client-side like JavaScript to perform certain actions.
See the following example of creating a dropdown with value attribute:
The following code is used for <select> tag:
<select id="selecttheme"> <option value="Mar">Maroon</option> <option value="Gre">Green</option> <option value="Yel">Yellow</option> <option value="Blu">Blue</option> <option value="Red">Red</option> </select>
An example of accessing a selected option in JavaScript
Let me move ahead and access the value/text of the selected option and perform some action based on it.
The same dropdown as in the above example is created with options to select a color.
After selecting the color, press the button to apply that color to the document.
The following code is used to create <select> dropdown:
<select id="selcolor"> <option value="Maroon">Maroon</option> <option value="Green">Green</option> <option value="Yellow">Yellow</option> <option value="Blue">Blue</option> <option value="Red">Red</option> <option value="White">Other</option> </select>
Complete code with JavaScript:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function ifelsefunction() {
var seltheme = document.getElementById("selcolor").value;
if(seltheme == "Maroon"){
document.body.style.backgroundColor = "Maroon";
}
else if (seltheme == "Green"){
document.body.style.backgroundColor = "Green";
}
else if (seltheme == "Blue"){
document.body.style.backgroundColor = "Blue";
}
else if (seltheme == "Red"){
document.body.style.backgroundColor = "Red";
}
else if (seltheme == "Yellow"){
document.body.style.backgroundColor = "Yellow";
}
else{
document.body.style.backgroundColor = "White";
}
}
</script>
<style>
.ifelsediv {
background: #66869D;
height: 75px;
width:250px;
border-radius: 15px;
padding:20px;
font-size:22px;
color:#fff;
}
</style>
</head>
<body>
<div class="ifelsediv">
<label>Select A Color: </label>
<select id="selcolor">
<option value="Maroon">Maroon</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="Blue">Blue</option>
<option value="Red">Red</option>
<option value="White">Other</option>
</select>
<button onclick="ifelsefunction()">Apply selected option</button>
</div>
</body>
</html>
This line of code is used in the JavaScript section to access the value of <select> option:
At the click event of the button, the JS function is called that assigns the selected value in the dropdown to a variable. This value is used in applying the color to the current document.
A demo of accessing visible text in jQuery
This time, I will use jQuery to access the value of the selected option.
You may access both the text as well as value in jQuery by using different methods. In this demo, I will access visible text.
You can see in the code, the value is different to text for each option in <select> tag. As you select a color, the jQuery displays the visible text in an alert.
The code:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#jqueryselect").change(function(){
var selectedcolor = $('#jqueryselect option:selected').text();
alert (selectedcolor);
});
});
</script>
<style>
.jquerysel {
background: #A0CFCF;
height: 75px;
width:250px;
border-radius: 15px;
padding:20px;
font-size:22px;
color:#fff;
}
</style>
</head>
<body>
<div class="jquerysel">
<label>Select A Color: </label><select id="jqueryselect">
<option value="MAR">Maroon</option>
<option value="GRE">Green</option>
<option value="YEL">Yellow</option>
<option value="BLU">Blue</option>
<option value="RED">Red</option>
</select>
</div>
</body>
</html>
Similarly, you may access the value by using the $.val() jQuery method:
var selectedcolor = $('#jqueryselect').val();
Replace this line in the above example and it will display the shortcode/value of the color in value attribute rather than visible text.
An example of getting value in PHP script
In this example of getting the value of the selected option of HTML dropdown, a form is created with a <select> tag in the markup section.
After choosing a color from the drop-down, click the “Submit” button.
The form’s data will be submitted to the same PHP file and it will display the selected color.
The form method used in the example is “post”, so you may get the form controls values by using the $_POST[“”] PHP array. This is the form’s code used in the example:
<form action="" method="post"> <div class="seldemo"> <label>Select A Color: </label> <select name="selphp"> <option value="Maroon">Maroon</option> <option value="Green">Green</option> <option value="Yellow">Yellow</option> <option value="Blue">Blue</option> <option value="Red">Red</option> </select> <p><input type="submit" value="Submit" class="btncls"></p> </div> </form>
This is how the PHP script is used to get the value:
<?php
if( $_POST["selphp"] != "" )
{
echo "You selected the following color:<strong>". $_POST["selphp"]."</strong>";
}
?>
For your convenience, this the complete code of above example:
<!DOCTYPE html>
<html>
<head>
<style>
.seldemo {
background: #A0CFCF;
height: 75px;
width:250px;
border-radius: 15px;
padding:20px;
font-size:22px;
color:#fff;
}
.btncls{
background-color:#F6B33C;
border: #2e6da4;
font-family: Arial, Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #000;
letter-spacing: 1px;
padding: 8px 12px;
font-size: 14px;
font-weight: normal;
border-radius: 4px;
line-height: 1.5;
text-decoration:none;
}
</style>
</head>
<body>
<form action="" method="post">
<div class="seldemo">
<label>Select A Color: </label>
<select name="selphp">
<option value="Maroon">Maroon</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="Blue">Blue</option>
<option value="Red">Red</option>
</select>
<p><input type="submit" value="Submit" class="btncls"></p>
</div>
</form>
</body>
</html>
<!--
PHP Code
-->
< ?php
if( $_POST["selphp"] != "" )
{
echo "You selected the following color:<strong>". $_POST["selphp"]."</strong>";
}
?>
If you specified the “get” method in the form then you could use the $_GET[“”] PHP array.
Styling the select dropdown by CSS
Now, let me show how you may style the <select> dropdown by using the power of CSS.
In the following example, I have used a few simple CSS properties along with the CSS3 gradient property.
See the output and code:
Along with border linear-gradient, the box-shadow property is also used in the dropdown.
The complete code including CSS:
<!DOCTYPE html>
<html>
<head>
<style>
.selcls {
padding: 3px;
border: solid 1px #517B97;
outline: 0;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
width:150px;
}
.seldemo {
background: #A0CFCF;
height: 75px;
width:250px;
border-radius: 15px;
padding:20px;
font-size:22px;
color:#fff;
}
</style>
</head>
<body>
<div class="seldemo">
<label>Gender: </label>
<select name="selphp" class="selcls">
<option value="M">Male</option>
<option value="F">Female</option>
</select>
</div>
</body>
</html>
Rounded borders by border-radius property
This dropdown is given the border-radius property of CSS3 to make the borders rounded. The color scheme is also changed. Play with border, width, padding, and other properties as you want:
CSS:
<style>
.selcls {
padding: 9px;
border: solid 1px #C9302C;
outline: 0;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #E78F8D), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #E78F8D 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
border-radius:13px;
width:150px;
}
.seldemo {
background: #5E9E47;
height: 75px;
width:250px;
border-radius: 15px;
padding:20px;
font-size:22px;
color:#fff;
}
</style>
Using multiple attribute and styling with CSS
To allow visitors to choose multiple options in the <select> tag, you may use the multiple attribute. In the above example, you saw only one option could be selected.
By using multiple attributes, a user may select more than one option by pressing the ctrl key as using Windows platform.
See a demo online by clicking the links below:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.selcls {
padding: 9px;
border: solid 1px #C9302C;
outline: 0;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #E78F8D), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #E78F8D 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
height:200px;
width:150px;
}
.seldemo {
background: #5E9E47;
height: auto;
width:350px;
border-radius: 15px;
padding:20px;
font-size:22px;
color:#fff;
}
label{
margin-top:-100px;
}
</style>
</head>
<body>
<div class="seldemo">
<label>Your Expertise: </label>
<p><select class="selcls" multiple>
<option>PHP</option>
<option>Java</option>
<option>HTML</option>
<option>CSS</option>
<option>Bootstrap</option>
<option>SQL</option>
</select>
</p>
</div>
</body>
</html>
Use Bootstrap framework and plug-in for creating beautiful select dropdowns
If you are using the Bootstrap framework then there are nice plug-ins for creating cool select dropdowns.
One such plug-in is Bootstrap-Select which is explained here. It adds useful features to default dropdowns. For example, you may search the options by adding a textbox. This is particularly useful if there are many options in the dropdown.
Similarly, all selected options are visible as ticked and you may set the limit of selected options if using multiple attribute.
See a few demos of these <select> dropdowns, first a simple one where a user may choose two options.
See online demo and code
A dropdown with search option demo
Using the same plug-in and adding a text box allows users to search the options.
See online demo and code
See the complete code on the demo page.
Read more about this in the Bootstrap select tutorial.