级联菜单

最新推荐文章于 2021-12-02 20:02:14 发布

Mrf_w

最新推荐文章于 2021-12-02 20:02:14 发布

阅读量335

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Mrf_w/article/details/54175312

本文提供两种实现省市区联动下拉菜单的方法。方法一使用固定省份城市数据，通过JavaScript监听省份选择变化并更新城市选项；方法二采用更灵活的数据结构，便于扩展和维护。

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

链接菜单城市方法一方法二

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Select对象的属性演示</title>
<script type="text/javascript">
window.onload=function(){
var pcs=["河南省","河北省","江苏省","黑龙江省"];
var city1=["郑州市","洛阳市","安阳市","新乡市"];
var city2=["北京市","廊坊市","天津市","保定市"];
var city3=["南京市","上海市","苏州市","昆山市"];
var city4=["哈尔滨市","黑海市","牡丹江市","雅丹江市"];
var po=document.getElementById("po");
var city=document.getElementById("city");
for(i=0;i<pcs.length;i++){
  po.add(new Option(pcs[i],i),null);
  }
for(i=0;i<city1.length;i++){
  city.add(new Option(city1[i],i),null);
  }
po.onchange=function(){
  city.innerHTML="";
  var key=po.value;
  if( key==0){
   for(i=0;i<city1.length;i++){
      city.add(new Option(city1[i],i),null);
  }
   }else if( key==1){
    for(i=0;i<city2.length;i++){
          city.add(new Option(city2[i],i),null);
    }
     }else if( key==2){
      for(i=0;i<city3.length;i++){
          city.add(new Option(city3[i],i),null);
    }
  }else if( key==3){
   for(i=0;i<city4.length;i++){
          city.add(new Option(city4[i],i),null);
    }

   }


  }
}
</script>

</head>

<body>

</select>

</body>
</html>

方法二
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简单的添加下拉菜单</title>
<style type="text/css">
body{
margin:10;
padding:0;
font-size:12px;
}

</style>
<script type="text/javascript">
window.onload = function(){
  var cityList = new Array();
  cityList['河北省'] = ['邯郸市','石家庄市'];
  cityList['河南省'] = ['郑州市','洛阳市'];
  cityList['湖北省'] = ['武汉市','宜昌市'];

</script>
</head>

<body>

</body>
</html>