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.
| 1 | var ms = new inputEx.MultiSelectField({ |
| 2 | label: 'Javascript libraries you use', |
| 3 | name: 'country', |
| 4 | choices: [{ value: 'Choose a library' }, { value: 'YUI' }, { value: 'Dojo' }, { value: 'Prototype' }, { value: 'Scriptaculous'}, { value: 'Mootools' }], |
| 5 | parentEl: 'container1', |
| 6 | description: 'Select and order your favorite libraries' |
| 7 | }); |
| 8 | ms.updatedEvt.subscribe(function(e,params) { |
| 9 | var value = YAHOO.lang.JSON.stringify(params[0]); |
| 10 | YAHOO.util.Dom.get('container1').appendChild( inputEx.cn('div',null,null,"Updated at "+(new Date())+" "+value) ); |
| 11 | }); |
| view plain | print | ? |
As SelectField, MultiSelect field allow to set the labels for the options
| 1 | var ms = new inputEx.MultiSelectField({ |
| 2 | label: 'Javascript libraries you use', |
| 3 | name: 'country', |
| 4 | choices: [ |
| 5 | { value: null, label: 'Choose a library' }, |
| 6 | { value: 'yui', label: 'YUI' }, |
| 7 | { value: 'dojo', label: 'Dojo' }, |
| 8 | { value: 'prototype', label: 'Prototype' }, |
| 9 | { value: 'scriptaculous', label: 'Scriptaculous'}, |
| 10 | { value: 'mootools', label: 'Mootools' } |
| 11 | ], |
| 12 | parentEl: 'container2', |
| 13 | description: 'Select and order your favorite libraries' |
| 14 | }); |
| 15 | ms.updatedEvt.subscribe(function(e,params) { |
| 16 | var value = YAHOO.lang.JSON.stringify(params[0]); |
| 17 | YAHOO.util.Dom.get('container2').appendChild( inputEx.cn('div',null,null,"Updated at "+(new Date())+" "+value) ); |
| 18 | }); |
| view plain | print | ? |
Example setting the default value
| 1 | var ms = new inputEx.MultiSelectField({ |
| 2 | label: 'Javascript libraries you use', |
| 3 | name: 'country', |
| 4 | choices: [ |
| 5 | { value: null, label: 'Choose a library' }, |
| 6 | { value: 'yui', label: 'YUI' }, |
| 7 | { value: 'dojo', label: 'Dojo' }, |
| 8 | { value: 'prototype', label: 'Prototype' }, |
| 9 | { value: 'scriptaculous', label: 'Scriptaculous'}, |
| 10 | { value: 'mootools', label: 'Mootools' } |
| 11 | ], |
| 12 | parentEl: 'container3', |
| 13 | description: 'Select and order your favorite libraries' |
| 14 | }); |
| 15 | ms.updatedEvt.subscribe(function(e,params) { |
| 16 | var value = YAHOO.lang.JSON.stringify(params[0]); |
| 17 | YAHOO.util.Dom.get('container2').appendChild( inputEx.cn('div',null,null,"Updated at "+(new Date())+" "+value) ); |
| 18 | }); |
| 19 | |
| 20 | ms.setValue(['yui','dojo']); |
| view plain | print | ? |