selectList Home

selectList Examples

  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>

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

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>

Select your favorite websites

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>

Which animals would you like to keep as pets?