javaScript实现三级菜单级联

最新推荐文章于 2024-07-22 17:44:20 发布

忙碌的布谷鸟

最新推荐文章于 2024-07-22 17:44:20 发布

阅读量6.2k

点赞数 1

分类专栏： HTML+JavaScript 文章标签： javascript function action 文档

本文链接：https://blog.csdn.net/guoquanyou/article/details/6670108

版权

HTML+JavaScript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<html>
<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['河南省']=['商丘','郑州','驻马店'];
		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['山东省']['济南']=['济南1','济南2','济南3','济南4','济南5','济南6'];
		
		cityList['河南省']['商丘']=['商丘1','商丘2','商丘3','商丘4','商丘5','商丘6'];
		cityList['河南省']['郑州']=['郑州1','郑州2','郑州3','郑州4','郑州5'];
		cityList['河南省']['驻马店']=['驻马店1','驻马店2','驻马店3','驻马店4','驻马店5','驻马店6'];
		
		cityList['四川省']['绵阳']=['绵阳1','绵阳2','绵阳3','绵阳4','绵阳5','绵阳6'];
		cityList['四川省']['自贡']=['自贡1','自贡2','自贡3','自贡4','自贡5'];
		cityList['四川省']['成都']=['成都1','成都2','成都3','成都4','成都5','成都6'];
		
		
		//提取二级连选中的值
		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>
<form id="form1" name="form1" method="post" action="">
  <select name="selProvince" id="select" οnchange="selectCity()">
      <option value="山东省" >山东省</option>
      <option value="河南省" >河南省</option>
      <option value="四川省" >四川省</option>
      <option value=""selected="selected">--请选择省份--</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>
</body>
</html>