我能够将两个下拉列表链接在一起但是，我面临的问题是将2个依赖于1和3取决于2这样的离开链接3下拉列表。
这是我的2下拉列表的代码链接在一起： -
<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>
答案 0 :(得分：1)
简短回答与第二次选择的方式相同。 代码看起来像这样。
有很多改进可以质疑你的问题和我补充的答案。
<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>
以下是fiddle相同的
答案 1 :(得分：1)
我要感谢Umesh Aawte帮助我。
三个下拉列表（行业，行业和公司）是动态下拉列表，其链接方式是，行业依赖于行业和公司依赖于行业和行业。 概念： 有3个部门（第1部门，第2部门和第3部门）。如果选择了sector1，那么行业的下拉列表将填充选项（industry11，industry12，industry13，industry14）。其他部门也是如此。此外，如果选择行业11，则选择下拉公司列表（公司111，公司112，公司113，公司114）。
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>