Hello All, In this blog i am going to show you how you can add search option in Drop down box.it is very helpful when u have large amount of list in drop down box.
INDEX.PHP
This file contain list of states
<html>
<head>
<title>Dropdown with Search Pption </title>
<link href="select2.css" rel="stylesheet"/>
<script src="jquery-1.8.0.min.js"></script>
<script src="select2.js"></script>
<script>
$(document).ready(function() {
$("#states").select2({
placeholder: "Select a State",
allowClear: true
});
});
</script>
</head>
<body>
<select style="width:300px" id="states">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
</body>
</html>
You Need select2.js file for searching content in Dropdown file.
You can Download attached file Below
0 Comment(s)