两个上拉框的关联

两个下拉框的关联
首先说明，帖子非原创，是在本人制作网页的时候遇到的问题在网上搜索到的答案，具体作者不详。两个上拉框的关联

先看图，下面这部分代码的主要功能就是实现点击【我的手机品牌】，选择你要的品牌，然后【我的手机型号】就会显示你上面选择的那款手机的相应的型号。

<html>
? <head>
?<script language="javascript">
??function changeProvince(){
???with(document.myForm){
????var countrys = new Array();
????countrys["0"] = ["--请选择所在省份和地区--"];
????countrys["中国"] = ["四川","陕西","福建","湖南","甘肃","西藏"];
????countrys["美国"] = ["华盛顿","密西西比","芝加哥","费城"];

//可以在这里修改两个下拉列表的值，前面的【中国】【美国】是第一个列表的候选值，后面的省份或者州名是第二个列表的值，按照需要修改吧
????var value = country.value;
????province.options.length = 0;
????var option;
????for(i = 0;i < countrys[value].length;i++){
?????option = new Option(countrys[value][i],countrys[value][i]);
?????province.options.add(option);
????}
????if(country.value == "0")
?????province.disabled = true;
????else
?????province.disabled = false;
???}
??}
?</script>
? </head>
? <body>
?<form method="post" action="" name="myForm">
??<div>    
????国家：<select name="country" onChange="changeProvince()" style="width=150px" >
??????<option value="0">--请选择所属国家--</option>
??????<option value="中国">中国</option>
??????<option value="美国">美国</option>

//这里的【中国】和【美国】要和上面【中国】【美国】保持一致，因为有时候这里的值可能是英文，也就是说大小写一定要保持一致，否则程序就无法识别导致列表为空了
?????? </select>
??</div>
??<div>省份/地区：<select name="province" style="width=150px">
???????<option>--请选择所在省份和地区--</option>
??????</select>
??</div>
?</form>
? </body>
</html>

两个上拉框的关联

热点推荐