欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

级联菜单1.0版,新手超详细解析

程序员文章站 2023-11-06 11:40:40
级联菜单1.0版,新手超详细解说。 菜单不是什么难操作,但是我作为一个初学者还是有很多困惑,今天决定花一个下午弄懂它,总算弄出个1.0版。 所谓级联菜单,就是一级选项选中后,二级选项变成相对应的选项...

级联菜单1.0版,新手超详细解说。

菜单不是什么难操作,但是我作为一个初学者还是有很多困惑,今天决定花一个下午弄懂它,总算弄出个1.0版。

所谓级联菜单,就是一级选项选中后,二级选项变成相对应的选项。比如下面,选中辽宁省后,城市的选项就变成辽宁的城市了。

我这是1.0版,以后还有2.0版

解题思路是:

1、要建立一个二维数组,数组的第一维对应的是省份的选项顺序,第二维对应的是省份所拥有的城市。

2、选中了省份后,要能知道数组里相对应的城市,并把这个城市的数组拿出来。

3、清空城市数组里的所有选项。

4、遍历城市数组,其中有些小技巧,生成选项,把城市名赋给选项,把选项拼接到城市数组中。

注:arr 里,我写的是“城市1”,这是故意写的,你选完其他项后,再选择省份,城市选项变成了城市1,即,城市选项里的城市,只用了1次。

opt.innertext = citys[i] 和opt.innerhtml= citys[i],都可以,但二者是有区别的。text只显示文本,html包括标记等内容都显示出来。

二者赋值方式也不一样。text里标记不会被识别。html标记会被识别。

省份:	//onchage是选择事件,选项改变时触发。省份辽宁省吉林省
					
城市:城市
	 
<script type="text/javascript">
	function text(){
		var arr = [['城市1'],['沈阳','鞍山','大连'],['长春','四平']]	//和省份选项一样多的,二维数组
		var index = document.getelementbyid("provience").selectedindex;//选中省份对应的下标。下标从0开始。
		var citys = arr[index];			//选中省份对应的城市。
				//清空城市里的选项
		var selcity= document.getelementbyid("city");	//取得城市选项的对象。
		selcity.options.length = 0;  //将城市选项数量变成0,即清空
		for(var i = 0; i