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.
template	jQuery	null	Template element as jQuery object.

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.
removeAllOptions	-	Removes all options of the listbox.
addOption	value,label	Adds new option to the listbox.
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="showcase/resources/demo/images/themes/' + option.label + '.png" alt="" /><span style="float:right;font-size:14px">' + option.label + '</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>

<h3>PrimeElement</h3>
<p-listbox 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>
</p-listbox>

<h3>PrimeElement Template</h3>
<p-listbox multiple>
    <option value="1">afterdark</option>
    <option value="2">bootstrap</option>
    <option value="3">cupertino</option>
    <option value="4">rocket</option>
    <option value="5">vader</option>
    <template>
        <img src="showcase/resources/demo/images/themes/{{label}}.png" alt="" /><span style="float:right;font-size:14px">{{label}}</span>
    </template>
</p-listbox>
                                

Usage

Listbox is similar to a select element that requires options as children.

Simple

<p-listbox 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>
</p-listbox>
                                

Custom Content

In order to display custom content in listbox, place a template tag and add mustache template to repeat for each item.

<p-listbox multiple>
    <option value="1">afterdark</option>
    <option value="2">bootstrap</option>
    <option value="3">cupertino</option>
    <option value="4">rocket</option>
    <option value="5">vader</option>
    <template>
        <img src="showcase/resources/demo/images/themes/{{label}}.png" alt="" /><span style="float:right;font-size:14px">{{label}}</span>
    </template>
</p-listbox>
                                

Attributes

Name	Type	Default	Description
id	string	null	Identifier of the element.
scrollheight	integer	200	Maximum height boundary of the content, if total height of items exceed this value, scrollbar is displayed.
onitemselect	function	null	Name of the function to invoke when an item is selected.
onitemunselect	function	null	Name of the function to invoke when an item is unselected.

Methods

Name	Parameters	Description
disable()	-	Displays the element.
enable()	-	Enables the element.