两个下拉框的关联 -

liuyifan789

浏览: 54344 次

最近访客更多访客>>

ldlzp

ASDFX110

jzq84229

java12345678

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

两个下拉框的关联

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

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

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