Use the following code to create a basic inputEx MultiSelectField. The first value of "options" is used as the invite text to select an option.
var ms = new Y.inputEx.MultiSelectField({
label: 'Javascript libraries you use',
name: 'country',
choices: [{ value: 'Choose a library' }, { value: 'YUI' }, { value: 'Dojo' }, { value: 'Prototype' }, { value: 'Scriptaculous'}, { value: 'Mootools' }],
parentEl: 'container1',
description: 'Select and order your favorite libraries'
});
ms.on("updated",function(params) {
var value = Y.JSON.stringify(params);
Y.one('#container1').appendChild( inputEx.cn('div',null,null,"Updated at "+(new Date())+" "+value) );
});
As SelectField, MultiSelect field allow to set the labels for the options
var ms = new Y.inputEx.MultiSelectField({
label: 'Javascript libraries you use',
name: 'country',
choices: [
{ value: null, label: 'Choose a library' },
{ value: 'yui', label: 'YUI' },
{ value: 'dojo', label: 'Dojo' },
{ value: 'prototype', label: 'Prototype' },
{ value: 'scriptaculous', label: 'Scriptaculous'},
{ value: 'mootools', label: 'Mootools' }
],
parentEl: 'container2',
description: 'Select and order your favorite libraries'
});
ms.on("updated",function(params) {
var value = Y.JSON.stringify(params);
Y.one('#container2').appendChild( inputEx.cn('div',null,null,"Updated at "+(new Date())+" "+value) );
});
Example setting the default value
var ms = new Y.inputEx.MultiSelectField({
label: 'Javascript libraries you use',
name: 'country',
choices: [
{ value: null, label: 'Choose a library' },
{ value: 'yui', label: 'YUI' },
{ value: 'dojo', label: 'Dojo' },
{ value: 'prototype', label: 'Prototype' },
{ value: 'scriptaculous', label: 'Scriptaculous'},
{ value: 'mootools', label: 'Mootools' }
],
parentEl: 'container3',
description: 'Select and order your favorite libraries'
});
ms.on("updated",function(params) {
var value = Y.JSON.stringify(params);
Y.one('#container3').appendChild( inputEx.cn('div',null,null,"Updated at "+(new Date())+" "+value) );
});
ms.setValue(['yui','dojo']);