Starting with this multiple select element with 6 total values, 2 are selected.
<select id="whopper" multiple="multiple" size="4"> <option value="mayo">Mayonnaise</option> <option value="lett" selected="selected">Lettuce</option> <option value="tomo">Tomatoes</option> <option value="onin" selected="selected">Onions</option> <option value="pckl">Pickles</option> <option value="kchp">Ketchup</option> </select>
Which normally looks like this:
Adding this unobtrusive Javascript to the header <script>:
jQuery(document).ready(function() {
$('#whopper').multi_single_select({list_class:'toppings', title:'Topping'});
});
converts the above element to this (it's a list element with some styles):
If the select has a label for it, the header string 'Options...' will be replaced by it