Use the following code to create a basic inputEx SelectField.
| 1 | new inputEx.SelectField({ |
| 2 | name: 'country', |
| 3 | choices: [ // choices: [ <- alternative syntax (shorter) |
| 4 | { value: 'United States of America' }, // 'United States of America', <- |
| 5 | { value: 'France' } // 'France' <- |
| 6 | ], // ], <- |
| 7 | parentEl: 'container1' |
| 8 | }); |
| view plain | print | ? |
Use the following code to create choices with labels different from values
| 1 | new inputEx.SelectField({ |
| 2 | label: 'Where are you from ?', |
| 3 | name: 'country', |
| 4 | choices: [ // no alternative syntax |
| 5 | { value: 'us', label: 'United States of America' }, |
| 6 | { value: 'fr', label: 'France' } |
| 7 | ], |
| 8 | parentEl: 'container1bis' |
| 9 | }); |
| view plain | print | ? |
How to listen to the updated event :
| 1 | var el = YAHOO.util.Dom.get('container2'); |
| 2 | 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 }); |
| 3 | |
| 4 | var button = inputEx.cn('button', null, null, "SetValue with 'us'"); |
| 5 | var val = 'us'; |
| 6 | el.appendChild(button); |
| 7 | YAHOO.util.Event.addListener(button, "click" ,function() { |
| 8 | field2.setValue(val); |
| 9 | val = (val == 'fr') ? 'us' : 'fr'; |
| 10 | button.innerHTML = "SetValue with '"+val+"'"; |
| 11 | }); |
| 12 | |
| 13 | var logDiv = inputEx.cn('div', null, null, "Log :"); |
| 14 | el.appendChild(logDiv); |
| 15 | field2.updatedEvt.subscribe(function(e,params) { |
| 16 | var value = params[0]; |
| 17 | logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value; |
| 18 | logDiv.appendChild(inputEx.cn('br')); |
| 19 | }); |
| view plain | print | ? |
Add choices dynamically
| 1 | var el = YAHOO.util.Dom.get('container3'); |
| 2 | var field3 = new inputEx.SelectField({name: 'country', choices: [{ value: 'United States of America' }, { value: 'France' }], parentEl: el}); |
| 3 | |
| 4 | var button1 = inputEx.cn('button', null, null, "Add 'Spain' choice (and select 'Spain')"); |
| 5 | YAHOO.util.Event.addListener(button1, "click" ,function() { |
| 6 | field3.addChoice({value:"Spain",selected:true}); |
| 7 | button1.disabled = true; |
| 8 | }); |
| 9 | |
| 10 | var button2 = inputEx.cn('button', null, null, "Add 'United Kingdom' choice (value : 'uk'), in position 1"); |
| 11 | YAHOO.util.Event.addListener(button2, "click" ,function() { |
| 12 | field3.addChoice({value:"uk",label:"United Kingdom",position:1}); |
| 13 | button2.disabled = true; |
| 14 | }); |
| 15 | |
| 16 | var button3 = inputEx.cn('button', null, null, "Add 'Sweden' choice after 'France' choice"); |
| 17 | YAHOO.util.Event.addListener(button3, "click" ,function() { |
| 18 | field3.addChoice({value:"Sweden",after:"France"}); |
| 19 | button3.disabled = true; |
| 20 | }); |
| 21 | |
| 22 | el.appendChild(button1); |
| 23 | el.appendChild(button2); |
| 24 | el.appendChild(button3); |
| 25 | |
| 26 | var logDiv3 = inputEx.cn('div', null, null, "Log : "); |
| 27 | el.appendChild(logDiv3); |
| 28 | field3.updatedEvt.subscribe(function(e,params) { |
| 29 | var value = params[0]; |
| 30 | logDiv3.innerHTML += "Updated at "+(new Date())+" with value "+value; |
| 31 | logDiv3.appendChild(inputEx.cn('br')); |
| 32 | }); |
| view plain | print | ? |
Remove choices dynamically
| 1 | var el = YAHOO.util.Dom.get('container4'); |
| 2 | var field4 = new inputEx.SelectField({ |
| 3 | name: 'country', |
| 4 | choices: [ |
| 5 | { value: 'usa', label: 'United States of America' }, |
| 6 | { value: 'de', label: 'Germany' }, |
| 7 | { value: 'uk', label: 'United Kingdom' }, |
| 8 | { value: 'fr', label: 'France' }, |
| 9 | { value: 'se', label: 'Sweden' }, |
| 10 | { value: 'es', label: 'Spain' } |
| 11 | ], |
| 12 | parentEl: el |
| 13 | }); |
| 14 | |
| 15 | var button4 = inputEx.cn('button', null, null, "Remove 'Spain' choice (by label)"); |
| 16 | YAHOO.util.Event.addListener(button4, "click" ,function() { |
| 17 | field4.removeChoice({label:"Spain"}); |
| 18 | button4.disabled = true; |
| 19 | }); |
| 20 | |
| 21 | var button5 = inputEx.cn('button', null, null, "Remove 'United Kingdom' choice (by value)"); |
| 22 | YAHOO.util.Event.addListener(button5, "click" ,function() { |
| 23 | field4.removeChoice({value:"uk"}); |
| 24 | button5.disabled = true; |
| 25 | }); |
| 26 | |
| 27 | var button6 = inputEx.cn('button', null, null, "Remove 'Germany' choice (by position)"); |
| 28 | YAHOO.util.Event.addListener(button6, "click" ,function() { |
| 29 | field4.removeChoice({position:1}); |
| 30 | button6.disabled = true; |
| 31 | }); |
| 32 | |
| 33 | el.appendChild(button4); |
| 34 | el.appendChild(button5); |
| 35 | el.appendChild(button6); |
| 36 | |
| 37 | var logDiv4 = inputEx.cn('div', null, null, "Log : "); |
| 38 | el.appendChild(logDiv4); |
| 39 | field4.updatedEvt.subscribe(function(e,params) { |
| 40 | var value = params[0]; |
| 41 | logDiv4.innerHTML += "Updated at "+(new Date())+" with value "+value; |
| 42 | logDiv4.appendChild(inputEx.cn('br')); |
| 43 | }); |
| view plain | print | ? |
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.
| 1 | var el = YAHOO.util.Dom.get('container5'); |
| 2 | 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}); |
| 3 | |
| 4 | var button7 = inputEx.cn('button', null, null, "Hide choice 'France'"); |
| 5 | el.appendChild(button7); |
| 6 | var button8 = inputEx.cn('button', null, null, "Show choice 'France'"); |
| 7 | el.appendChild(button8); |
| 8 | var button9= inputEx.cn('button', null, null, "Disable choice 'Spain'"); |
| 9 | el.appendChild(button9); |
| 10 | var button10 = inputEx.cn('button', null, null, "Enable choice 'Spain'"); |
| 11 | el.appendChild(button10); |
| 12 | |
| 13 | var logDiv5 = inputEx.cn('div', null, null, "Log :"); |
| 14 | el.appendChild(logDiv5); |
| 15 | field5.updatedEvt.subscribe(function(e,params) { |
| 16 | var value = params[0]; |
| 17 | logDiv5.innerHTML += "Updated at "+(new Date())+" with value "+value; |
| 18 | logDiv5.appendChild(inputEx.cn('br')); |
| 19 | }); |
| 20 | |
| 21 | |
| 22 | YAHOO.util.Event.addListener(button7, "click" ,function() { |
| 23 | |
| 24 | field5.hideChoice({value:'fr'}); |
| 25 | |
| 26 | logDiv5.innerHTML += "[INFO] Hide choice 'France' (current value : "+field5.getValue()+")"; |
| 27 | logDiv5.appendChild(inputEx.cn('br')); |
| 28 | }); |
| 29 | |
| 30 | YAHOO.util.Event.addListener(button8, "click" ,function() { |
| 31 | |
| 32 | field5.showChoice({value:'fr'}); |
| 33 | |
| 34 | logDiv5.innerHTML += "[INFO] Show choice 'France' (current value : "+field5.getValue()+")"; |
| 35 | logDiv5.appendChild(inputEx.cn('br')); |
| 36 | }); |
| 37 | |
| 38 | YAHOO.util.Event.addListener(button9, "click" ,function() { |
| 39 | |
| 40 | field5.disableChoice({label:'Spain'}); |
| 41 | |
| 42 | logDiv5.innerHTML += "[INFO] Disable choice 'Spain' (current value : "+field5.getValue()+")"; |
| 43 | logDiv5.appendChild(inputEx.cn('br')); |
| 44 | }); |
| 45 | |
| 46 | YAHOO.util.Event.addListener(button10, "click" ,function() { |
| 47 | |
| 48 | field5.enableChoice({label:'Spain'}); |
| 49 | |
| 50 | logDiv5.innerHTML += "[INFO] Enable choice 'Spain' (current value : "+field5.getValue()+")"; |
| 51 | logDiv5.appendChild(inputEx.cn('br')); |
| 52 | }); |
| view plain | print | ? |