selectList Home
selectList Examples
Simple Usage
Using title to set hint
If you specify the title attribute in the original
<select> element, then selectList will use it as a hint
for the user.
<script type="text/javascript"> $(document).ready(function () { $('select').selectList(); }); </script> ... Which Police Academy movies have you seen? <select multiple="multiple" title="Select movies"> <option value="Police Academy">Police Academy</option> ... </select>
Which Police Academy movies have you seen?
Pre-selecting options
Any options that have the selected attribute set will be
automatically added to the selection when the plugin is initialized.
<script type="text/javascript"> $(document).ready(function () { $('select').selectList(); }); </script> ... Which of these countries have you visited? <select multiple="multiple"> <option value="Australia" selected="selected">Australia</option> ... </select>
Which of these countries have you visited?
Styling
Each element added to the selection is assigned the
selectlist-item class, and
the list as a whole has the selectlist-list class. This
makes it easy to reference the items and the list with CSS selectors
and apply custom styles to change their default appearance.
In the example below, the selected items are styled to have white text, black background, and a thin gray border.
<style type="text/css"> .selectlist-item { background: black; color: white; border: solid 1px #888; } </style>
Which of Batman's accessories would you like to own?
Custom List Item Template
<script type="text/javascript"> $(document).ready(function () { $('select').selectList({ template: '<li>%text%<br /><small>%value%</small></li>' }); }); </script> ... Select your favorite websites <select multiple="multiple"> <option value="http://delicious.com/">Delicious</option> ... </select>
Select your favorite websites
Custom Animations
<script type="text/javascript"> $(document).ready(function () { $('select').selectList({ addAnimate: function (item, callback) { $(item).slideDown(500, callback); }, removeAnimate: function (item, callback) { $(item).slideUp(500, callback); } }); }); </script>
Which animals would you like to keep as pets?