菜单不是什么难操作, 但是我作为一个初学者还是有很多困惑, 今天决定花一个下午弄懂它, 总算弄出个 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 标记会被识别.
省份:
城市:
- <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
来源: https://www.2cto.com/kf/201809/780373.html