Listbox Listbox is an advanced widget to select an item from a collection.

Basic

Multiple

Custom

Listbox widget is applied to a select element.

$('#basic').puilistbox();
                                
<select id="basic">
    <option value="0">Select One</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
                                
Name Type Default Description
data array null An array of items to populate listbox dynamically. Objects in this array can be simple types or object with label-value pairs like {label:'Option 1', value:1}
content function null Template of an item to customize content.
scrollHeight integer 200 Maximum height boundary of the content, if total height of items exceed this value, scrollbar is displayed.
Name Parameters Description
itemSelect event: puilistboxitemselect event
item: Selected item
Fired when an item is selected.
itemUnselect event: puilistboxitemunselect event
item: Unselected item
Fired when an item is unselected.

Example

                $('#default').puilistbox({
                    itemSelect: function(event, item) {
                        
                    }
                });
                                
Name Parameters Description
selectItem index: Index of the item. Selects item with given index.
unselectItem index: Index of the item. Unselects item with given index.
unselectAll - Clears selections.
enable - Enable the widget
disable - Disable the widget.
option name: Name of the option Returns the value of the option.
option name: Name of the option, value: Value of the option Set the value of the option.

Example

$('#basic').puilistbox('selectItem', 1);
                                
$(function() {
    var themes = new Array('afterdark', 'afternoon', 'afterwork', 'aristo', 'black-tie', 'blitzer', 'bluesky', 'bootstrap', 'casablanca', 'cruze',
            'cupertino', 'dark-hive', 'dot-luv', 'eggplant', 'excite-bike', 'flick', 'glass-x', 'home', 'hot-sneaks', 'humanity', 'le-frog', 'midnight',
            'mint-choc', 'overcast', 'pepper-grinder', 'redmond', 'rocket', 'sam', 'smoothness', 'south-street', 'start', 'sunny', 'swanky-purse', 
            'trontastic', 'ui-darkness', 'ui-lightness', 'vader');

    $('#basic').puilistbox();

    $('#multiple').puilistbox();

    $('#custom').puilistbox({
        data: themes,
        content: function(option) {
            return '<img src="resources/demo/images/themes/' + option + '.png" alt="" /><span style="float:right;font-size:14px">' + option + '</span>';
        }
    });
});

                                
<h3>Basic</h3>
<select id="basic">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>

<h3>Multiple</h3>
<select id="multiple" multiple="multiple">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>

<h3>Custom</h3>
<select id="custom"></select>