Contact Us

Scripts: Javascript :: Forms :: Library Article #9

Developer's Section

Learn to populate DropDowns Dynamically using Javascript
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr
Rating:  | Rate It:   
Average Votes: (2677)

There are several ways we can populate a dropdown menu from the information provided in another dropdown menu.

Using the javascript onchange method, we will call a method that will populate another dropdown without submitting the data back to the server. This can help to make the process of selecting the data from several dropdowns faster. Also, it eliminates the need to query the server several times before submitting all the information for processing to the server.

In this tutorial we will try to accomplish the following:

Select Make:
Select Model

Here is the code:
 Code Snippet 1

<script language="Javascript">

//define model arrays

var ford = new Array("Taurus","Ranger","Mustang")

var honda = new Array("Civic","Accord","Pilot")

var acura = new Array("RL","TL","TSX")

var toyota = new Array("Avalon","Corolla","Camry")

var mercedes = new Array("Cabriolet","C Class","C230")

var audi = new Array("A3","A4","TT")

var chrysler = new Array("Crossfire","300","Sebring")

//method used to populate dropdowns

function populateDD(thisDropDown) {

     yourSelection = thisDropDown.options[thisDropDown.selectedIndex].value
     var ChooseModel = Array();
     switch (yourSelection){
     case "Ford":
     ChooseModel = ford
     case "Honda":
     ChooseModel = honda
     case "Acura":
     ChooseModel = acura
     case "Toyota":
     ChooseModel = toyota
     case "Mercedes-Benz":
     ChooseModel = mercedes
     case "Audi":
     ChooseModel = audi
     case "Chrysler":
     ChooseModel = chrysler

     modelDropDown = document.thisForm.myModel
for(var i=modelDropDown.options.length-1;i>=0;i--){

for(var i=0; i < ChooseModel.length;++i){
var newopt = document.createElement("OPTION");
newopt.text = ChooseModel[i];
newopt.value = ChooseModel[i];


<form name="thisForm" action="yourpage.xhtml" method="POST" >

<table border="1" style="border:collapse">
     <td>Select Make:</td>
<select name="myMake" onChange="populateDD(document.thisForm.myMake)">
<option value="Ford">Ford</option>
<option value="Honda">Honda</option>
<option value="Acura">Acura</option>
<option value="Toyota">Toyota</option>
<option value="Mercedes-Benz">Mercedes-Benz</option>
<option value="Audi">Audi</option>
<option value="Chrysler">Chrysler</option>
<td>Select Model</td>
<select name="myModel">
<option value="Select Make">Find Your Vehicle Here</option>


See other Scripts in Forms


Submit Your Scripts:

If you would like to have your Javascripts published in this section please fill out
the form below:
*Your Name or Username:
Home Town:
*Description and Code:
*Enter Code shown
to the right:

[ Refresh Image ]