Chained DropDown in Javascript

You might have seen chained drop-downs in some sites, where changing a value in one drop-down causes new values to be populated in another drop-down. This chain effect can be simply implemented using Javascript.

        At first, we will create the two drop-downs for which we are implementing the chained effect. We will provide the options in the 1st drop-down. No options need to be given for the 2nd drop-down and it values will be populated dynamically based upon the value of the 1st drop-down. We have named the first drop-down 'Company' which lists some mobile companies. The second drop-down 'Model' will list out few models for the selected company.
<select id="Company" >
 <option value=""></option>
 <option value="Samsung">Samsung</option>
 <option value="Apple">Apple</option>
 <option value="Nokia">Nokia</option>
</select>

<select id="Model"> </select>

        Now on to the coding part. The configureDropDown method is fired on the change of value in the Company drop-down and populates the values in the 'Model' drop-down. We will first define the arrays containing the value of models for each company. Now we will check the value of the Company drop-down and based on it get the values for the Model drop-down.
/* Configure the DropDown ddl2 based on the value selected in DropDown ddl1. */
function configureDropDown(ddl1,ddl2) {

 // Arrays holding the value for ddl2 (model comboBox).
 var Nokia = new Array('Lumia', 'PureView');
 var Samsung = new Array('Galaxy S3', 'Galaxy S2');
 var Apple = new Array('iPhone4', 'iPhone5');
  
 // Check the value in ddl1 (Company comboBox).
 switch (ddl1.value) {
  case 'Samsung':
   getOptionsFromArray(Samsung, document.getElementById(ddl2));
   break;
  case 'Apple':
   getOptionsFromArray(Apple, document.getElementById(ddl2));
   break;
  case 'Nokia':                 
   getOptionsFromArray(Nokia, document.getElementById(ddl2));
   break;
  default:
   document.getElementById(ddl2).options.length = 0;
   break; 
 }
}

        The getOptionsFromArray method retrieves the options for the model combobox from the respective array. The method loops through the entire array and adds the array values as options to the drop-down.
// Get the options for the model combobox from the respective array. 
function getOptionsFromArray(selectArray, select) {
 select.options.length = 0;
 // Create option for the comboBox.
 for (i = 0; i < selectArray.length; i++) {
        var opt = document.createElement('option');
  opt.value = selectArray[i];
  opt.text = selectArray[i];
  select.options.add(opt);
 }
}
Now call this method on the onChange event of the company drop-down.
<select id="Company" onchange="configureDropDown(this,'Model')">

        This finishes our tutorial. We now have a 'Model' drop-down whose values changes depending on the value of Company drop-down. You can get the entire code from below.
<html>
<head>
<script type="text/javascript">

     /* Configure the DropDown ddl2 based on the value selected in DropDown ddl1. */
     function configureDropDown(ddl1,ddl2) {

 // Arrays holding the value for ddl2 (model comboBox).
 var Nokia = new Array('Lumia', 'PureView');
 var Samsung = new Array('Galaxy S3', 'Galaxy S2');
 var Apple = new Array('iPhone4', 'iPhone5');
  
 // Check the value in ddl1 (Company comboBox).
 switch (ddl1.value) {
      case 'Samsung':
           getOptionsFromArray(Samsung, document.getElementById(ddl2));
           break;
      case 'Apple':
           getOptionsFromArray(Apple, document.getElementById(ddl2));
           break;
      case 'Nokia':                 
           getOptionsFromArray(Nokia, document.getElementById(ddl2));
           break;
      default:
           document.getElementById(ddl2).options.length = 0;
           break; 
 }
    }
 
     // Get the options for the model combobox from the respective array. 
     function getOptionsFromArray(selectArray, select) {
 select.options.length = 0;
 // Create option for the comboBox.
 for (i = 0; i < selectArray.length; i++) {
        var opt = document.createElement('option');
      opt.value = selectArray[i];
      opt.text = selectArray[i];
      select.options.add(opt);
 }
     }
</script>
</head>
<body>

<h2>Chained Drop-Downs</h2><br/>

<select id="Company" onchange="configureDropDown(this,'Model')">
 <option value=""></option> 
 <option value="Samsung">Samsung</option>
 <option value="Apple">Apple</option> 
 <option value="Nokia">Nokia</option>
</select>  
<br/>

<select id="Model"> </select>

</body>
</html>
Your comments and suggestions are welcome.

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...
 

Copyright © 2012 | ScriptSplash | Powered by Blogger Templates