Home Tutorial Javascript JavaScript Dynamic Combo Box

 
 

Share on Google+Share on Google+
JavaScript Dynamic Combo Box
Posted on: August 12, 2010 at 12:00 AM
Advertisement
Here we are going to create dynamic combo box.

JavaScript Dynamic Combo Box

Here we are going to create dynamic combo box. For this, we have created two combo boxes where combo1 represents countries and combo2 represents the cities. The values of the combo boxes are stored in respective arrays. As the user selects a country from the first combo box, the cities of that country, get populated into the second combo.

Here is the code:

<html>
<
h2>ComboBox</h2>
<
script language="javascript">
var arr = new Array();
arr[0] = new Array("-select-");
arr[1] = new Array("Maharashtra","Karnataka","Andhra Pradesh","Tamil Nadu");
arr[2] = new Array("Carinthia"," Styria");
arr[3] = new Array("Florida","New York","Maryland");
arr[4] = new Array("Queensland","Victoria","Tasmania","New South Wales");

function change(combo1){
var comboValue = combo1.value;
document.forms["form"].elements["combo2"].options.length=0;
for (var i=0;i<arr[comboValue].length;i++){
var option = document.createElement("option");
option.setAttribute('value',i+1);
option.innerHTML = arr[comboValue][i];
document.forms["form"].elements["combo2"].appendChild(option);
}
}
</script>
<
form name="form" method="post"><select name="combo1" onchange="change(this);">
<
option value="0">-Select-</option>
<
option value="1">India</option>
<
option value="2">Austria</option>
<
option value="3">USA</option>
<
option value="4">Australia</option>
</
option>
</
select><br />
<
select name="combo2">
</
select>
</
form>
</
html>

Output:

On selecting the value from the first combo, related values will get displayed in second combo:

Advertisement

Related Tags for JavaScript Dynamic Combo Box:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: August 12, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com