🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Ideal Select is a small jQuery plugin used to transform a native select box into a stylish dropdown list that is fully customizable via CSS.

Select Drop-Down-list

Documentation

Ideal Select

Small select dropdown replacement.

Support: IE9+ and modern browsers
Demo: http://jsbin.com/uMahupU/3

How To

Load:

<script src="js/jquery.idealselect.min.js"></script> <link rel="stylesheet" href="css/jquery.idealselect.css">

Create select:

<select id="states" name="states">   <option value="AL">Alabama</option>   ... </select>

Initialize:

// Only single select supported $('select:not([multiple])').idealselect();

Events

Just trigger events on the original select element:

$('#states').change(function() {   console.log('triggered!');   });

Dynamic

If you add more elements to your select make sure to build the markup again:

var options = [   '<option value="one">One</option>',   '<option value="two">Two</option>',   '<option value="three">Three</option>' ]; $('#states').append(options.join('')).idealselect('_build');

You May Also Like