# inputEx - SelectField Usage

## Basic SelectField creation

Use the following code to create a basic inputEx SelectField.

new inputEx.SelectField({ name: 'country', choices: [ // choices: [ <- alternative syntax (shorter) { value: 'United States of America' }, // 'United States of America', <- { value: 'France' } // 'France' <- ], // ], <- parentEl: 'container1' });

## Differentiate choices' labels and values

Use the following code to create choices with labels different from values

new 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' });

## Updated event

How to listen to the updated event :

var el = YAHOO.util.Dom.get('container2'); var field2 = new 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); YAHOO.util.Event.addListener(button, "click" ,function() { field2.setValue(val); val = (val == 'fr') ? 'us' : 'fr'; button.innerHTML = "SetValue with '"+val+"'"; }); var logDiv = inputEx.cn('div', null, null, "Log :"); el.appendChild(logDiv); field2.updatedEvt.subscribe(function(e,params) { var value = params[0]; logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value; logDiv.appendChild(inputEx.cn('br')); });

## addChoice

Add choices dynamically

var el = YAHOO.util.Dom.get('container3'); var field3 = new 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')"); YAHOO.util.Event.addListener(button1, "click" ,function() { field3.addChoice({value:"Spain",selected:true}); button1.disabled = true; }); var button2 = inputEx.cn('button', null, null, "Add 'United Kingdom' choice (value : 'uk'), in position 1"); YAHOO.util.Event.addListener(button2, "click" ,function() { field3.addChoice({value:"uk",label:"United Kingdom",position:1}); button2.disabled = true; }); var button3 = inputEx.cn('button', null, null, "Add 'Sweden' choice after 'France' choice"); YAHOO.util.Event.addListener(button3, "click" ,function() { field3.addChoice({value:"Sweden",after:"France"}); button3.disabled = true; }); el.appendChild(button1); el.appendChild(button2); el.appendChild(button3); var logDiv3 = inputEx.cn('div', null, null, "Log : "); el.appendChild(logDiv3); field3.updatedEvt.subscribe(function(e,params) { var value = params[0]; logDiv3.innerHTML += "Updated at "+(new Date())+" with value "+value; logDiv3.appendChild(inputEx.cn('br')); });

## removeChoice

Remove choices dynamically

var el = YAHOO.util.Dom.get('container4'); var field4 = new 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)"); YAHOO.util.Event.addListener(button4, "click" ,function() { field4.removeChoice({label:"Spain"}); button4.disabled = true; }); var button5 = inputEx.cn('button', null, null, "Remove 'United Kingdom' choice (by value)"); YAHOO.util.Event.addListener(button5, "click" ,function() { field4.removeChoice({value:"uk"}); button5.disabled = true; }); var button6 = inputEx.cn('button', null, null, "Remove 'Germany' choice (by position)"); YAHOO.util.Event.addListener(button6, "click" ,function() { field4.removeChoice({position:1}); button6.disabled = true; }); el.appendChild(button4); el.appendChild(button5); el.appendChild(button6); var logDiv4 = inputEx.cn('div', null, null, "Log : "); el.appendChild(logDiv4); field4.updatedEvt.subscribe(function(e,params) { var value = params[0]; logDiv4.innerHTML += "Updated at "+(new Date())+" with value "+value; logDiv4.appendChild(inputEx.cn('br')); });

## Hide / Show / Disable / Enable choice

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 = YAHOO.util.Dom.get('container5'); var field5 = new 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.updatedEvt.subscribe(function(e,params) { var value = params[0]; logDiv5.innerHTML += "Updated at "+(new Date())+" with value "+value; logDiv5.appendChild(inputEx.cn('br')); }); YAHOO.util.Event.addListener(button7, "click" ,function() { field5.hideChoice({value:'fr'}); logDiv5.innerHTML += "[INFO] Hide choice 'France' (current value : "+field5.getValue()+")"; logDiv5.appendChild(inputEx.cn('br')); }); YAHOO.util.Event.addListener(button8, "click" ,function() { field5.showChoice({value:'fr'}); logDiv5.innerHTML += "[INFO] Show choice 'France' (current value : "+field5.getValue()+")"; logDiv5.appendChild(inputEx.cn('br')); }); YAHOO.util.Event.addListener(button9, "click" ,function() { field5.disableChoice({label:'Spain'}); logDiv5.innerHTML += "[INFO] Disable choice 'Spain' (current value : "+field5.getValue()+")"; logDiv5.appendChild(inputEx.cn('br')); }); YAHOO.util.Event.addListener(button10, "click" ,function() { field5.enableChoice({label:'Spain'}); logDiv5.innerHTML += "[INFO] Enable choice 'Spain' (current value : "+field5.getValue()+")"; logDiv5.appendChild(inputEx.cn('br')); });