两个下拉框的关联

最新推荐文章于 2024-09-24 08:37:02 发布

liuyifan789789987987

最新推荐文章于 2024-09-24 08:37:02 发布

阅读量886

点赞数

CC 4.0 BY-SA版权

文章标签： python javascript ViewUI

本文链接：https://blog.youkuaiyun.com/liuyifan789789987987/article/details/84287845

本文提供了一个简单的HTML和JavaScript代码示例，用于实现两个下拉列表的联动效果。当用户选择一个国家后，会自动更新第二个下拉列表中对应省份或地区的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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