ListSelect

This plugin turns an unordered list into a customisable drop-down select box containing the list items as options.

Download

Click here to Download (Version 1.0) »
Download CSS and arrow image »

Options

Option Type Required Default Description
initText string no Click here to select... The text shown when nothing has been selected.
dropdownOffset object no { 'top': 0, 'left': 0 } An object containing pixel offset co-ordinates for the top left corner of the drop-down box.
animate boolean no false Whether to animate the drop-down box when it is shown or hidden. If jQuery UI is not available, this setting will have no effect.
animation int no 'blind' The animation to use when showing or hiding the drop-down menu. If jQuery UI is not available, this setting will have no effect.
animationSpeed int no 'fast' The speed of the drop-down menu animation. If jQuery UI is not available, this setting will have no effect.
clickSelects boolean no false Controls the behaviour of the links in the drop-down menu. If false, the links stay as standard html links and clicking them simply loads the link URL. If true, clicking a link changes the text in the select box and fires the change event; the value is also available through the listSelect's val() function.

Events

Event Return Parameters Description
change type Fires when a link is clicked in the drop-down menu (if clickSelects is true).

Examples

Basic usage:

$(document).ready(function(){
    $('#list1').listSelect();
});

Nested, offset and not animated:

$(document).ready(function(){
    $('#list1').listSelect({ initText: 'Choose an option...', 
                             dropdownOffset: { 'top': 15, 'left': 0 }, 
                             animate: false });
});

List without links, selectable, with change event and val():

$(document).ready(function(){
    $('#list3').listSelect({ clickSelects: true });
    
    $('#list3').bind('change', function() {
        $('#list3-value').val($(this).val())
    });
});