Create Searchable Dropdown Select With jQuery - selectstyle

File Size: 17.2 KB
Views Total: 103193
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create Searchable Dropdown Select With jQuery - selectstyle

selectstyle is a lightweight jQuery plugin that transforms the regular select box into a searchable dropdown list with custom styles.


  • Light (Google) & Dark themes.
  • Custom image.
  • Easy to style using your own CSS.

How to use it:

1. Import jQuery JavaScript library and the selectstyle plugin's files into the html file.

<link href="src/selectstyle.css" rel="stylesheet">
<script src="//"></script>
<script src="src/selectstyle.js"></script>

2. Initialize the plugin on your existing select element and done.

<select placeholder="Select Your Favorite">
  <option value="AF">Afghanistan</option>
  <option value="AX">Åland Islands</option>
  <option value="AL">Albania</option>
  <option value="DZ">Algeria</option>
  <option value="AS">American Samoa</option>
  <option value="AD">Andorra</option>
  <option value="AO">Angola</option>
  <option value="AI">Anguilla</option>
  <option value="AQ">Antarctica</option>

3. Specify the theme you want to use.

<select theme="google" placeholder="Select Your Favorite">

<select theme="dark" placeholder="Select Your Favorite">

4. Add a search bar to the dropdown list.

<select theme="google" placeholder="Select Your Favorite" data-search="true">

5. Set the width and height of your dropdown list.

  width  : 250,
  height : 300,

6. Trigger a callback function after the option is changed.

  onchange : function(val){}

7. Set the image of the selected option.

<select theme="google" placeholder="Select Your Favorite" data-image="1.png">

This awesome jQuery plugin is developed by wajipk. For more Advanced Usages, please check the demo page or visit the official website.