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

作者: 压力山大3702532
来源: 51数据库
2021-10-12

级联菜单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

推荐阅读