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