select2list

select2list is a jQuery plugin that turns an HTML <select> element into a flat list of clickable items. The new list drives the old <select> element, so it is a drop in replacement with seamless degradation.

How do I use it?

In addition to the documentation provided here, the source code is well documented, and easily readable.

Using the plugin is very simple. No configuration is necessary; simply calling the plugin function on a select element will get you up and running.

$('select.list').select2list();

The plugin allows you to customize the HTML tags and classes used to generate the list using the options at initialization.

$('select.custom').select2list({   tagName: 'div',   childTagName: 'p' }); 

Configuration Options

    <tr>         <th scope="row"><code>className</code></th>         <td><code>'select2list'</code></td>         <td>The HTML class to be used with the new wrapper element.</td>     </tr>      <tr>         <th scope="row"><code>childTagName</code></th>         <td><code>'li'</code></td>         <td>The inner HTML tag to be used to generate the child elements (the options).</td>     </tr>      <tr>         <th scope="row"><code>childClassName</code></th>         <td><code>'select2list-option'</code></td>         <td>The HTML class to be used with the new children elements (the options).</td>     </tr>      <tr>         <th scope="row"><code>optionValueDataKey</code></th>         <td><code>'select2list-value'</code></td>         <td>Each child element will have it's associated value stored by jQuery using the $.data method, this is the key that will hold the value.</td>     </tr>      <tr>         <th scope="row"><code>change</code></th>         <td><code>$.noop</code></td>         <td>See the <code>change</code> event below.</td>     </tr> </tbody> 

Triggered Events

Available Methods

After initializing the plugin, you can call methods on the plugin by providing the method name as the first parameter, followed by any method parameters, to the plugin function.

   <tr>        <th scope="row"><code>add</code></th>        <td>            <ol>                <li><code>value</code> - the value of the new option</li>                <li><code>display</code> - the display value of the new option (optional, defaults to <code>value</code>)</li>            </ol>        </td>        <td>Add a new option to the list. Also creates a new &lt;option&gt; element and appends it to the underlying &lt;select&gt; element.</td>    </tr>     <tr>        <th scope="row"><code>select</code></th>        <td>            <ol>                <li><code>value</code> - the value of the option to select</li>            </ol>        </td>        <td>Changes the currently selected option by looking up the option with the provided value and selecting it.</td>    </tr> 

Styling the list

Styling the list is very simple. You can control the CSS classes that go on the parent and child elements. When an option is selected, the selected class is also added to the child (option) element.