Make a Dropdown with Search Box using jQuery

To do the simple dropdown search using JQquery, please follow below code, In this sample, I have used select2 jQuery plugin to create dropdown with a search box.

Please include select2.min.css and select2.min.js with jQuery library in the head section as follows:

<script src=""></script>
<link href="" rel="stylesheet" />
<script src=""></script>

Create a dropdown element and add few sample options and also add a button to read the selected dropdown value and dispay in the result div.

<!-- Sample Dropdown -->       
<select id="selectColor" style="width: 200px;" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
   <option value="0">-- Select Color --</option>
   <option value="#9400D3">Violet</option>
   <option value="#4B0082">Indigo</option>
   <option value="#0000FF">Blue</option>
   <option value="#00FF00">Green</option>
   <option value="#FFFF00">Yellow</option>
   <option value="#FF7F00">Orange</option>
   <option value="#FF0000">Red</option>
<input type="button" value="Seleted Color" id="btnSelectColor">
<div id="result">Hexa Code : , Color  Name :  </div>

Please find below the JQuery script

<!-- Script -->
<script >
	$(document).ready(function () {

		// Initialize select2

		// Read selected option
		$('#btnSelectColor').click(function () {
			var colorName = $('#selectColor option:selected').text();
			var colorHexaCode = $('#selectColor').val();
			$('#result').html("Hexa Code : " + colorHexaCode + ", Color  Name : " + colorName);
	}); <

Please find the demo below and click here to download the sample html file.

What is GST

GST (Goods and Service Tax) is a comprehensive tax on the supply of goods and services at each stage of any transaction. Read More

Income Tax Information

An income tax is a tax imposed by government on income earned by you. Income tax is a key source of funds that the government uses to fund its activities and serve the public. Read More

General Insurance Companies in India

General insurance is insurance for valuables other than our life and health. General insurance covers the insurer against damage, loss and theft of your valuables. Read More

Types of Bank Loans In India

Loan means lending money from one individual or entity to another. A loan has three components – principal or the borrowed amount, rate of interest and tenure or duration for which the loan is availed. Read More

List of Banks in India

The Reserve Bank of India is the central Bank that is fully owned by the Government of India. It is governed by a central board (headed by a Governor) appointed by the Central Government. Read More

List of Educational Institutions in India

The following list of comprehensive websites on higher education in India. These websites will provide detailed information on education system in India. Read More