inputEx - SelectField Usage

Basic SelectField creation

Use the following code to create a basic inputEx SelectField.

new inputEx.SelectField({name: 'country', selectValues: ['United States of America','France'], parentEl: 'container1'});

Updated event

How to listen to the updated event :

var el = YAHOO.util.Dom.get('container2'); var field = new YAHOO.inputEx.SelectField({name: 'country', selectValues: ['United States of America','France'], parentEl: el}); var logDiv = YAHOO.inputEx.cn('div', null, null, "Log :<br />"); el.appendChild(logDiv); field.updatedEvt.subscribe(function(e,params) { var value = params[0]; logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value+"<br />"; });

addOption

Add options dynamically

var button1 = YAHOO.inputEx.cn('button', null, null, "Add 'Spain' option (and select 'Spain')"); YAHOO.util.Event.addListener(button1, "click" ,function() { field3.addOption({value:"Spain",selected:true}); }); var button2 = YAHOO.inputEx.cn('button', null, null, "Add 'United Kingdom' option (value : 'uk'), in position 1"); YAHOO.util.Event.addListener(button2, "click" ,function() { field3.addOption({value:"uk",option:"United Kingdom",position:1}); }); var button3 = YAHOO.inputEx.cn('button', null, null, "Add 'Sweden' option after 'France' option"); YAHOO.util.Event.addListener(button3, "click" ,function() { field3.addOption({value:"Sweden",after:"France"}); });

removeOption

Remove options dynamically

var field4 = new YAHOO.inputEx.SelectField({ name: 'country', selectOptions: ['United States of America','Germany','United Kingdom','France','Sweden','Spain'], selectValues: ['usa','de','uk','fr','se','es'], parentEl: el }); var button4 = YAHOO.inputEx.cn('button', null, null, "Remove 'Spain' option (by option text)"); YAHOO.util.Event.addListener(button4, "click" ,function() { field4.removeOption({option:"Spain"}); }); var button5 = YAHOO.inputEx.cn('button', null, null, "Remove 'United Kingdom' option (by value)"); YAHOO.util.Event.addListener(button5, "click" ,function() { field4.removeOption({value:"uk"}); }); var button6 = YAHOO.inputEx.cn('button', null, null, "Remove option by position (position = 1)"); YAHOO.util.Event.addListener(button6, "click" ,function() { field4.removeOption({position:1}); });