如何使用HTML&；将3个下拉列表链接在一起；javascript_Javascript_Php_Jquery_Html

如何使用HTML&；将3个下拉列表链接在一起；javascript

javascript php jquery html

如何使用HTML&；将3个下拉列表链接在一起；javascript,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我能够将两个下拉列表链接在一起，但我面临着将3个下拉列表链接在一起的问题，因为2依赖于1，3依赖于2 这是链接在一起的my 2下拉列表的代码：- <head> <script type = "text/javascript"> function update() { var albania = ["Tirana","Durres","Vlore","Shkoder"]; var kosovo = ["Prishtina","Mitrovica","Pe

我能够将两个下拉列表链接在一起，但我面临着将3个下拉列表链接在一起的问题，因为2依赖于1，3依赖于2

这是链接在一起的my 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>


函数更新（）
{
var阿尔巴尼亚=[“地拉那”、“杜勒斯”、“弗罗雷”、“什科德”]；
科索沃变量=[“普里什蒂纳”、“米特罗维察”、“佩耶”、“加科夫”]；
德国var=[“柏林”、“法兰克福”、“汉诺威”、“波恩”]；
var countries=document.getElementById（“1”）；
在此处输入代码`var cities=document.getElementById（“2”）；
所选变量=国家。选项[countries.selectedIndex]。值；
如果（所选==“1”）{
对于（变量i=0；i<0.length；i++）{
var opt1=document.createElement（'option'）；
opt1.innerHTML=阿尔巴尼亚[i]；
opt1.value=阿尔巴尼亚[i]；
城市：儿童（opt1）；
}
}
否则如果（所选==“2”）
{
对于（var j=0；j<0.length；j++）{
var opt2=document.createElement（'option'）；
opt2.innerHTML=科索沃[j]；
opt2.value=科索沃[j]；
城市：儿童（opt2）；
}
}
否则如果（所选==“3”）
{
对于（var k=0；k

简短的答案与第二次选择时的答案相同。代码如下所示

我补充道，你问的问题和回答的问题可能会有很多改进

<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>


var阿尔巴尼亚=[“地拉那”、“杜勒斯”、“弗罗雷”、“什科德”]；
科索沃变量=[“普里什蒂纳”、“米特罗维察”、“佩耶”、“加科夫”]；
德国var=[“柏林”、“法兰克福”、“汉诺威”、“波恩”]；
函数updatewo（）{
var countries=document.getElementById（“1”）；
var cities=document.getElementById（“2”）；
所选变量=国家。选项[countries.selectedIndex]。值；
var i；
对于（i=cities.options.length-1；i>=0；i--）{
城市。删除（i）；
}
如果（所选==“1”）{
对于（变量i=0；i<0.length；i++）{
addOption（城市，阿尔巴尼亚[i]）；
}
}否则如果（所选==“2”）{
对于（var j=0；j<0.length；j++）{
addOption（城市，科索沃[j]）；
}
}否则如果（所选==“3”）{
对于（var k=0；k=0；i--）{
区域。移除（i）；
}
如果（选定==“地拉那”）{
对于（变量i=0；i<0.length；i++）{
addOption（地区，阿尔巴尼亚[i]）；
}
}否则如果（所选==“Durres”）{
对于（var j=0；j<0.length；j++）{
addOption（地区，科索沃[j]）；
}
}else if（已选==“Vlore”）{
对于（var k=0；k

这里是为同样的人工作的

我要感谢Umesh Aawte对我的帮助

三个下拉列表（部门、行业和公司）是动态下拉列表，以这样的方式链接：行业依赖于部门，公司依赖于行业和部门。概念：共有3个扇区（扇区1、扇区2和扇区3）。如果选择sector1，则行业下拉列表将填充选项（行业11、行业12、行业13、行业14）。其他部门的情况也类似。此外，如果选择了“行业11”，则公司下拉列表将填充选项（公司111、公司112、公司113、公司114）

代码：


var sector1=[“行业11”、“行业12”、“行业13”、“行业14”]；
var sector2=[“行业21”、“行业22”、“行业23”、“行业24”]；
var部门3=[“行业31”、“行业32”、“行业33”、“行业34”]；
函数updatewo（）{
var扇区=document.getElementById（“1”）；
var industries=document.getElementById（“2”）；
所选变量=扇区。选项[sections.selectedIndex]。值；
var i；
对于（i=industries.options.length-1；i>=0；i--）{
工业.删除（i）；
}
如果（所选==“1”）{
对于（变量i=0；i       <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>