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. |
$('#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. |
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>