I was able to link two drop down list together but, I am facing problem to link 3 drop down list together in such away that 2 depends on 1 and 3 depends on 2.
This is the code of my 2 drop down list linked together:-
<head>
<script type = "text/javascript">
function update()
{
var albania = ["Tirana","Durres","Vlore","Shkoder"];
var kosovo = ["Prishtina","Mitrovica","Peje","Gjakove"];
var germany = ["Berlin","Frankfurt","Hannover","Bonn"];
var countries = document.getElementById("1");
enter code here`var cities = document.getElementById("2");
var selected = countries.options[countries.selectedIndex].value;
if(selected=="1"){
for(var i = 0; i < albania.length; i++) {
var opt1 = document.createElement('option');
opt1.innerHTML = albania[i];
opt1.value = albania[i];
cities.appendChild(opt1);
}
}
else if(selected=="2")
{
for(var j = 0; j < kosovo.length; j++) {
var opt2 = document.createElement('option');
opt2.innerHTML = kosovo[j];
opt2.value = kosovo[j];
cities.appendChild(opt2);
}
}
else if(selected=="3")
{
for(var k = 0; k < germany.length; k++) {
var opt3 = document.createElement('option');
opt3.innerHTML = germany[k];
opt3.value = germany[k];
cities.appendChild(opt3);
}
}
else
var t =0;
}
</script>
</head>
<body>
<p><select id= "1" onchange="update()">
<option selected = "selected" >Select Country</option>
<option value="1">Albania</option>
<option value="2">Kosovo</option>
<option value="3">Germany</option>
</select>
</p>
<p><select id="2">
<option selected = "selected" ></option>
</body>
</html>
I would like to thank Umesh Aawte to help me.
Three drop down lists (sectors, industries and companies) are dynamic drop down lists, linked in such a way that, industries depends on sectors and companies depends on industries and sectors. Concept: There are 3 sectors (sector1, sector2 and sector3). If sector1 is selected, the drop down list of industries populates with options (industry11, industry12, industry13, industry14). Similar is the case for other sectors. Also if industry11 is selected than drop down list of companies populate with options (company111, company112, company113, company114).
CODE:
<html>
<head>
<script type="text/javascript">
var sector1 = ["industry11","industry12","industry13","industry14"];
var sector2 = ["industry21","industry22","industry23","industry24"];
var sector3 = ["industry31","industry32","industry33","industry34"];
function updateTwo() {
var sectors = document.getElementById("1");
var industries = document.getElementById("2");
var selected = sectors.options[sectors.selectedIndex].value;
var i;
for(i = industries.options.length - 1 ; i >= 0 ; i--) {
industries.remove(i);
}
if(selected=="1"){
for(var i = 0; i < sector1.length; i++) {
addOption(industries,sector1[i]);
}
} else if(selected=="2") {
for(var j = 0; j < sector2.length; j++) {
addOption(industries,sector2[j]);
}
} else if(selected=="3") {
for(var k = 0; k < sector3.length; k++) {
addOption(industries,sector3[k]);
}
}
}
updateThree = function() {
var industry11 = ["company111","company112","company113","company114"];
var industry12 = ["company121","company122","company123","company124"];
var industry13 = ["company131","company132","company133","company134"];
var industry14 = ["company141","company142","company143","company144"];
var industry21 = ["company211","company212","company213","company214"];
var industry22 = ["company221","company222","company223","company224"];
var industry23 = ["company231","company232","company233","company234"];
var industry24 = ["company241","company242","company243","company244"];
var industry31 = ["company311","company312","company313","company314"];
var industry32 = ["company321","company322","company323","company324"];
var industry33 = ["company331","company332","company333","company334"];
var industry34 = ["company341","company342","company343","company344"];
var industries = document.getElementById("2");
var companies = document.getElementById("3");
var selected = industries.options[industries.selectedIndex].value;
var i;
for(i = companies.options.length - 1 ; i >= 0 ; i--) {
companies.remove(i);
}
if(selected=="industry11"){
for(var i = 0; i < sector1.length; i++) {
addOption(companies,industry11[i]);
}
} else if(selected=="industry12") {
for(var j = 0; j < sector2.length; j++) {
addOption(companies,industry12[j]);
}
} else if(selected=="industry13") {
for(var k = 0; k < sector3.length; k++) {
addOption(companies,industry13[k]);
}
} else if(selected=="industry14") {
for(var k = 0; k < sector3.length; k++) {
addOption(companies,industry14[k]);
}
}
else if(selected=="industry21") {
for(var j = 0; j < sector2.length; j++) {
addOption(companies,industry21[j]);
}
} else if(selected=="industry22") {
for(var k = 0; k < sector3.length; k++) {
addOption(companies,industry22[k]);
}
} else if(selected=="industry23") {
for(var k = 0; k < sector3.length; k++) {
addOption(companies,industry23[k]);
}
}
else if(selected=="industry24") {
for(var j = 0; j < sector2.length; j++) {
addOption(companies,industry24[j]);
}
} else if(selected=="industry31") {
for(var k = 0; k < sector3.length; k++) {
addOption(companies,industry31[k]);
}
} else if(selected=="industry32") {
for(var k = 0; k < sector3.length; k++) {
addOption(companies,industry32[k]);
}
}
else if(selected=="industry33") {
for(var j = 0; j < sector2.length; j++) {
addOption(companies,industry33[j]);
}
} else if(selected=="industry34") {
for(var k = 0; k < sector3.length; k++) {
addOption(companies,industry34[k]);
}
}
else{
;
}
}
addOption = function(option, value) {
var opt = document.createElement('option');
opt.innerHTML = value;
opt.value = value;
option.appendChild(opt);
}
</script>
</head>
<body>
<p>
<select id="1" onchange="javaScript:updateTwo();">
<option value="0" selected="selected">Select Sector</option>
<option value="1">Sector1</option>
<option value="2">Sector2</option>
<option value="3">Sector3</option>
</select>
</p>
<p>
<select id="2" onchange="javaScript:updateThree();"></select>
</p>
<p>
<select id="3"></select>
</p>
</body>
</html>
The short answer is same way you did it for second select. The code will look like this.
There are lots of improvements possible to question you asked and answer I added.
<head>
<script type="text/javascript">
var albania = ["Tirana","Durres","Vlore","Shkoder"];
var kosovo = ["Prishtina","Mitrovica","Peje","Gjakove"];
var germany = ["Berlin","Frankfurt","Hannover","Bonn"];
function updateTwo() {
var countries = document.getElementById("1");
var cities = document.getElementById("2");
var selected = countries.options[countries.selectedIndex].value;
var i;
for(i = cities.options.length - 1 ; i >= 0 ; i--) {
cities.remove(i);
}
if(selected=="1"){
for(var i = 0; i < albania.length; i++) {
addOption(cities,albania[i]);
}
} else if(selected=="2") {
for(var j = 0; j < kosovo.length; j++) {
addOption(cities,kosovo[j]);
}
} else if(selected=="3") {
for(var k = 0; k < germany.length; k++) {
addOption(cities,germany[k]);
}
}
}
updateThree = function() {
var cities = document.getElementById("2");
var area = document.getElementById("3");
var selected = cities.options[cities.selectedIndex].value;
var i;
for(i = area.options.length - 1 ; i >= 0 ; i--) {
area.remove(i);
}
if(selected=="Tirana"){
for(var i = 0; i < albania.length; i++) {
addOption(area,albania[i]);
}
} else if(selected=="Durres") {
for(var j = 0; j < kosovo.length; j++) {
addOption(area,kosovo[j]);
}
} else if(selected=="Vlore") {
for(var k = 0; k < germany.length; k++) {
addOption(area,germany[k]);
}
} else if(selected=="Shkoder") {
for(var k = 0; k < germany.length; k++) {
addOption(area,germany[k]);
}
}
}
addOption = function(option, value) {
var opt = document.createElement('option');
opt.innerHTML = value;
opt.value = value;
option.appendChild(opt);
}
</script>
</head>
<body>
<p>
<select id="1" onchange="javaScript:updateTwo();">
<option value="0" selected="selected">Select Country</option>
<option value="1">Albania</option>
<option value="2">Kosovo</option>
<option value="3">Germany</option>
</select>
</p>
<p>
<select id="2" onchange="javaScript:updateThree();"></select>
</p>
<p>
<select id="3"></select>
</p>
</body>
</html>
Here is working fiddle for same