Fork me on GitHub

Example: Basic select field creation

How to create a select field.

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

Require the selection of a non-empty option

Try to select an empty option:

Updated event

How to listen to the updated event :

addChoice

Add choices dynamically

removeChoice

Remove choices dynamically

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.

HTML

<div id="field-container"></div>

JavaScript

Implementation

YUI().use('inputex-select',function(Y) {

   // Example 1 
   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'
   });
   
   
   // Example 1bis
   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'
   });
   

   // Example 1ter
   new Y.inputEx.SelectField({
      name: 'country',
      choices: [
         { value: '' }, // "empty" option
         { value: 'France' }
      ],
      required: true,
      showMsg: true,
      value: 'France',
      parentEl: 'container1ter'
   });


   // Example 2
   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 = Y.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 = Y.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(Y.inputEx.cn('br'));
   });
   
   
   // Example 3
   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 = Y.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 = Y.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 = Y.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 = Y.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(Y.inputEx.cn('br'));
   });
    
   
   // Example 4 
   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 = Y.inputEx.cn('button', null, null, "Remove 'Spain' choice (by label)");
   Y.on("click" ,function() {
      field4.removeChoice({label:"Spain"});
      button4.disabled = true;
   },button4);

   var button5 = Y.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 = Y.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 = Y.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(Y.inputEx.cn('br'));
   });
   
   
   // Example 5
   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 = Y.inputEx.cn('button', null, null, "Hide choice 'France'");
   el.appendChild(button7);
   var button8 = Y.inputEx.cn('button', null, null, "Show choice 'France'");
   el.appendChild(button8);
   var button9= Y.inputEx.cn('button', null, null, "Disable choice 'Spain'");
   el.appendChild(button9);
   var button10 = Y.inputEx.cn('button', null, null, "Enable choice 'Spain'");
   el.appendChild(button10);
   
   var logDiv5 = Y.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(Y.inputEx.cn('br'));
   });
   
   Y.on("click" ,function() {
      
      field5.hideChoice({value:'fr'});
      
      logDiv5.innerHTML += "[INFO] Hide choice 'France' (current value : "+field5.getValue()+")";
      logDiv5.appendChild(Y.inputEx.cn('br'));
   },button7) ;
   
   Y.on("click" ,function() {
      
      field5.showChoice({value:'fr'});
      
      logDiv5.innerHTML += "[INFO] Show choice 'France' (current value : "+field5.getValue()+")";
      logDiv5.appendChild(Y.inputEx.cn('br'));
   },button8);
   
   Y.on("click" ,function() {
      
      field5.disableChoice({label:'Spain'});
      
      logDiv5.innerHTML += "[INFO] Disable choice 'Spain' (current value : "+field5.getValue()+")";
      logDiv5.appendChild(Y.inputEx.cn('br'));
   },button9);
   
   Y.on("click" ,function() {
      
      field5.enableChoice({label:'Spain'});
      
      logDiv5.innerHTML += "[INFO] Enable choice 'Spain' (current value : "+field5.getValue()+")";
      logDiv5.appendChild(Y.inputEx.cn('br'));
   },button10);

});