Use the following code to create a basic inputEx SelectField.
new Y.inputEx.SelectField({
name: 'country',
choices: [ // choices: [ <- alternative syntax (shorter)
{ value: 'United States of America' }, // 'United States of America', <-
{ value: 'France' } // 'France' <-
], // ], <-
parentEl: 'container1'
});
Use the following code to create choices with labels different from values
new Y.inputEx.SelectField({
label: 'Where are you from ?',
name: 'country',
choices: [ // no alternative syntax
{ value: 'us', label: 'United States of America' },
{ value: 'fr', label: 'France' }
],
parentEl: 'container1bis'
});
How to listen to the updated event :
var el = Y.one('#container2');
var field2 = new Y.inputEx.SelectField({ name: 'country', label: 'Where are you from ?', choices: [{ value: 'us', label: 'United States of America' }, { value: 'fr', label: 'France' }], parentEl: el });
var button = inputEx.cn('button', null, null, "SetValue with 'us'");
var val = 'us';
el.appendChild(button);
Y.on( "click" ,function() {
field2.setValue(val);
val = (val == 'fr') ? 'us' : 'fr';
button.innerHTML = "SetValue with '"+val+"'";
},button);
var logDiv = inputEx.cn('div', null, null, "Log :");
el.appendChild(logDiv);
field2.on("updated",function(value) {
logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value;
logDiv.appendChild(inputEx.cn('br'));
});
Add choices dynamically
var el = Y.one('#container3');
var field3 = new Y.inputEx.SelectField({name: 'country', choices: [{ value: 'United States of America' }, { value: 'France' }], parentEl: el});
var button1 = inputEx.cn('button', null, null, "Add 'Spain' choice (and select 'Spain')");
Y.on("click" ,function() {
field3.addChoice({value:"Spain",selected:true});
button1.disabled = true;
},button1)
var button2 = inputEx.cn('button', null, null, "Add 'United Kingdom' choice (value : 'uk'), in position 1");
Y.on("click" ,function() {
field3.addChoice({value:"uk",label:"United Kingdom",position:1});
button2.disabled = true;
},button2);
var button3 = inputEx.cn('button', null, null, "Add 'Sweden' choice after 'France' choice");
Y.on("click" ,function() {
field3.addChoice({value:"Sweden",after:"France"});
button3.disabled = true;
},button3);
el.appendChild(button1);
el.appendChild(button2);
el.appendChild(button3);
var logDiv3 = inputEx.cn('div', null, null, "Log : ");
el.appendChild(logDiv3);
field3.on("updated",function(value) {
logDiv3.innerHTML += "Updated at "+(new Date())+" with value "+value;
logDiv3.appendChild(inputEx.cn('br'));
});
Remove choices dynamically
var el = Y.one('#container4');
var field4 = new Y.inputEx.SelectField({
name: 'country',
choices: [
{ value: 'usa', label: 'United States of America' },
{ value: 'de', label: 'Germany' },
{ value: 'uk', label: 'United Kingdom' },
{ value: 'fr', label: 'France' },
{ value: 'se', label: 'Sweden' },
{ value: 'es', label: 'Spain' }
],
parentEl: el
});
var button4 = inputEx.cn('button', null, null, "Remove 'Spain' choice (by label)");
Y.on("click" ,function() {
field4.removeChoice({label:"Spain"});
button4.disabled = true;
},button4);
var button5 = inputEx.cn('button', null, null, "Remove 'United Kingdom' choice (by value)");
Y.on( "click" ,function() {
field4.removeChoice({value:"uk"});
button5.disabled = true;
},button5);
var button6 = inputEx.cn('button', null, null, "Remove 'Germany' choice (by position)");
Y.on("click" ,function() {
field4.removeChoice({position:1});
button6.disabled = true;
},button6) ;
el.appendChild(button4);
el.appendChild(button5);
el.appendChild(button6);
var logDiv4 = inputEx.cn('div', null, null, "Log : ");
el.appendChild(logDiv4);
field4.on("updated",function(value) {
logDiv4.innerHTML += "Updated at "+(new Date())+" with value "+value;
logDiv4.appendChild(inputEx.cn('br'));
});
Hide, show, disable or enable an choice in the selector, without removing it totally, and keeping the original choice's order
Note : disableChoice and enableChoice methods have no effect with IE < 8 because it did not support disabled="disabled" attribute.
var el = Y.one('#container5');
var field5 = new Y.inputEx.SelectField({name: 'country', choices: [ { value: 'usa', label: 'United States of America' }, { value: 'fr', label: 'France' }, { value: 'es', label: 'Spain' }], parentEl: el});
var button7 = inputEx.cn('button', null, null, "Hide choice 'France'");
el.appendChild(button7);
var button8 = inputEx.cn('button', null, null, "Show choice 'France'");
el.appendChild(button8);
var button9= inputEx.cn('button', null, null, "Disable choice 'Spain'");
el.appendChild(button9);
var button10 = inputEx.cn('button', null, null, "Enable choice 'Spain'");
el.appendChild(button10);
var logDiv5 = inputEx.cn('div', null, null, "Log :");
el.appendChild(logDiv5);
field5.on("updated",function(value) {
logDiv5.innerHTML += "Updated at "+(new Date())+" with value "+value;
logDiv5.appendChild(inputEx.cn('br'));
});
Y.on("click" ,function() {
field5.hideChoice({value:'fr'});
logDiv5.innerHTML += "[INFO] Hide choice 'France' (current value : "+field5.getValue()+")";
logDiv5.appendChild(inputEx.cn('br'));
},button7) ;
Y.on("click" ,function() {
field5.showChoice({value:'fr'});
logDiv5.innerHTML += "[INFO] Show choice 'France' (current value : "+field5.getValue()+")";
logDiv5.appendChild(inputEx.cn('br'));
},button8);
Y.on("click" ,function() {
field5.disableChoice({label:'Spain'});
logDiv5.innerHTML += "[INFO] Disable choice 'Spain' (current value : "+field5.getValue()+")";
logDiv5.appendChild(inputEx.cn('br'));
},button9);
Y.on("click" ,function() {
field5.enableChoice({label:'Spain'});
logDiv5.innerHTML += "[INFO] Enable choice 'Spain' (current value : "+field5.getValue()+")";
logDiv5.appendChild(inputEx.cn('br'));
},button10);