Smooth Select List Replacement with jQuery - selectlist

File Size: 7.93 KB
Views Total: 5116
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Smooth Select List Replacement with jQuery - selectlist

selectlist is a simple, cross-browser jQuery plugin that converts regular select elements into smooth, heavily customizable dropdown lists with minimal effort.

How to use it:

1. Include jQuery selectlist plugin's stylesheet in the header of the document.

<link rel="stylesheet" href="css/jquery.selectlist.css">

2. Create a standard select list.

<select id="demo" name="demo">
  <option value="0">Ruby</option>
  <option value="1">Python</option>
  <option value="2">Golang</option>
  <option value="3" selected>Object-C</option>
  <option value="4">JavaScript</option>
  <option value="5">AngularJS</option>

3. Include jQuery library and the jQuery selectlist plugin's script in the footer.

<script src="//"></script>
<script src="js/jquery.selectlist.js"></script>

4. Call the plugin on the select element.

    zIndex: 10,
    width: 300,
    height: 40,
    border: '1px solid #ccccc',
    showMaxHeight: 400,

5. Full options to customize the select dropdown list.

// enable the plugin
enable: true,

// for IE6/7
zIndex: null,

// width of the select list
width: null, 

// height of the select list
height: null,

// border size of the slect list
border: null,

// border radius 
borderRadius: null,

// max height
showMaxHeight: null, 

// height of the options
optionHeight: null || 34, 

// size of the toggle icon
triangleSize: null || 6, 

// color of the toggle icon
triangleColor: null || '#333',

// where the select list should be shown
topPosition: false,

// animation speed
speed: null || 100,   

// callback
onChange: null  

Change logs:


  • modify default options value and fix onChange function object pointer


  • recover default selected item when unselect item


  • add title value when select opiton text overflow it's offsetWidth


  • JS & CSS fix.


  • CSS fix.


  • fix default font style
  • fixed a bug for ie


  • fixed for auto select item width

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