Picklist PickList is used to reorder items between differents lists.

Basic

Advanced

Picklist is applied to a container with two select elements. First select is the source and the second one is the target list. Items can be populated from the option elements or using the sourceData/targetData options.

$('#pick').puipicklist();
                                
<div id="pick">
    <select></select>
    <select></select>
</div>
                                
Name Type Default Description
effect string fade Name of the jQuery UI effect.
effectSpeed string/number fast Speed of the jQuery UI effect, valid values are "slow","normal", "fast" or value in milliseconds.
sourceCaption string null Caption text for source list.
targetCaption string null Caption text for target list.
dragdrop boolean true When enabled, items can be reordered using dragdrop.
sourceData array false An array of items to populate list dynamically. Objects in this array can be simple types or object with label-value pairs like {label:'Option 1', value:1}
targetData array false An array of items to populate list dynamically. Objects in this array can be simple types or object with label-value pairs like {label:'Option 1', value:1}
filter boolean false Boolean value to control filtering feature.
filterMatchMode string startsWith Defines built-in filtering mode, valid values are "startsWith", "contains", "endsWith" and "custom".
filter function null Filter function to use in case filterMatchMode is custom. This function gets item label and filter value as parameters and required to return a boolean value to implement filtering. true accepts the item and false rejects it.
content function null Template of an item to customize content.
showSourceControls boolean false Show the command buttons to reorder the source list.
showTargetControls boolean false Show the command buttons to reorder the target list.
Name Parameters Description
transfer event: puipicklisttransfer event
ui: Data about the event.
Fired when a transfer occurs between source and target.

Example

                $('#default').puipicklist({
                    transfer: function(event, ui) {
                        //ui.items: Transferred items. 
                        //ui.from: Old list.
                        //ui.to: New list.
                        //ui.type: Type of transfer e.g. "dragdrop","button" and "command"
                    }
                });
                                
Name Parameters Description
selectItem item: Item to select. Selects item with given index.
unselectItem item: Item to unselect. 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

var item = //li element as jQuery object
$('#basic').puipicklist('selectItem', item);
                                
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').puipicklist();

$('#advanced').puipicklist({
    effect: 'clip',
    showSourceControls: true,
    showTargetControls: true,
    sourceCaption: 'Available',
    targetCaption: 'Selected',
    filter: true,
    sourceData: 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>
<div id="basic">
    <select name="source">
        <option value="1">Volkswagen</option>
        <option value="2">Ford</option>
        <option value="3">Mercedes</option>
        <option value="4">Audi</option>
        <option value="5">BMW</option>
        <option value="6">Honda</option>
        <option value="6">Porsche</option>
        <option value="6">Chevrolet</option>
        <option value="6">Jaguar</option>
    </select>
    <select name="target">
    </select>
</div>

<h3>Advanced</h3>
<div id="advanced">
    <select name="source">
    </select>
    <select name="target">
    </select>
</div>