inputEx - SelectField Usage

Basic SelectField creation

Use the following code to create a basic inputEx SelectField.

Differentiate choices' labels and values

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

Updated event

How to listen to the updated event :

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 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.