JS实现三级级联菜单

最新推荐文章于 2021-10-20 12:54:17 发布

wintersweetzeng

最新推荐文章于 2021-10-20 12:54:17 发布

阅读量1.3k

点赞数

分类专栏： js 文章标签： JS

本文链接：https://blog.csdn.net/wintersweetzeng/article/details/28882509

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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=utf-8" />
<title>省市级联菜单</title>

<script language="javascript">
//定义省份包含的城市数组
var cityList= new Array();
//选中省份的下标
var provinceIndex;
//显示二级级联
function selectCity()
{
  cityList['云南省']=['昆明市','大理市'];
  cityList['陕西省']=['西安市','安康市','榆林市'];

  //获得第一级联的索引
  provinceIndex = document.form1.selProvince.value;
  var op;
  //清空第二级联和三级联，显示默认选中值
  document.form1.selCity.options.length = 1;
  document.form1.selChengzhen.options.length = 1;

  //循环读取份省包含城市的份数组，添加到第二级联
  for(var i in cityList[provinceIndex])
  {
   op=new Option(cityList[provinceIndex][i],cityList[provinceIndex][i]);
   document.form1.selCity.options.add(op);
  }
}

//选择城镇---三级联
function selctChengzhen()
{
  //cityList['云南省']= new Array();
  cityList['云南省']['昆明市']=['盘龙区','五华区'];
  cityList['云南省']['大理市']=['漾濞彝族自治县','宾川县'];

  cityList['陕西省']['西安市']=['莲湖区','新城区','碑林区','灞桥区','未央区','雁塔区'];
  cityList['陕西省']['安康市']=['宁陕县','石泉县','白河县','岚皋县'];
  cityList['陕西省']['榆林市']=['靖边县','神木县','定边县'];

  //提取二级连选中的值
  var cityIndex=document.form1.selCity.value;
  var oopp;
  //清空第三级联的列表
  document.form1.selChengzhen.options.length=1;
  //循环读取添加到三级联
  for(var j in cityList[provinceIndex][cityIndex])
  {
   oopp=new Option(cityList[provinceIndex][cityIndex][j],cityList[provinceIndex][cityIndex][j]);
   document.form1.selChengzhen.options.add(oopp);
  }
}
</script>
</head>

<body>
<div align="center">
<form id="form1" name="form1" method="post" action="">
<select name="selProvince" id="select" οnchange="selectCity()">
      <option value=""selected="selected">--请选择省份--</option>
   <option value="陕西省" >陕西省</option>
          <option value="云南省" >云南省</option>
</select>
<select name="selCity" id="select2" οnchange="selctChengzhen()">
<option value=""selected="selected">--请选择城市--</option>
</select>
<select name="selChengzhen" id="select3">
<option value=""selected="selected">--请选择市县--</option>
</select>
</form>
</div>
</body>
</html>

wintersweetzeng

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS实现三级级联菜单

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">省市级联菜单 //定义省份包含的城市数组 var cityList= new Array(); //选中省份的下标 var provinceIndex; //显示二级级联 f
复制链接

扫一扫