1. Simple Usage
2. Styling
3. Custom List Item Template
4. Custom Animations

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>

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>

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>

Custom List Item Template

The template option allows you to define the HTML code used to display the selected elements. The default is a simple list item (<li> element) containing the text of the selected option.

In this example, the template is set to also include the value of the selected option (defined as %value%), wrapped in <small> tags.

<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>

Custom Animations

Normally, new items appear on the list with a quick fade-in effect. If you'd like to use a different effect for this purpose, you can achieve this by setting the addAnimate and removeAnimate options to functions that perform the desired effect.

In the example below, two functions are defined to make the items appear and disappear with a slide down/slide up effect.

<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>