js进阶 9-12 js如何实现级联菜单 （章节测试）
一、总结
一句话总结：
1、js如何实现级联菜单 ？
二维数组，以第一级菜单的文本值做键，以对应的二级菜单选项的文本做值
2、用哪个属性可以获取一个元素的文本值？
text
二、js进阶 9-12 js实现级联菜单
1、案例说明：多级联菜单
-
使用二维数组和下拉菜单相结合，实现多级联动菜单
2、相关知识点：Select 下拉列表
Select 对象集合
- options[]返回包含下拉列表中的所有选项的一个数组
Select对象属性
- length返回下拉列表中的选项数目
- multiple 设置或返回是否选择多个项目。
- selectedIndex 设置或返回下拉列表中被选项目的索引号。
- size 设置或返回下拉列表中的可见行数。
- id/name/disabled/form/tabIndex
Select 对象方法
- add() 向下拉列表添加一个选项。
语法：selectobject.add(option,before)
- remove() 从下拉列表中删除一个选项.
语法: selectobject.remove(index)
- blur()/focus()
Option 对象的属性
- defaultSelected 返回 selected属性的默认值。
- index 返回下拉列表中某个选项的索引位置。
- Selected 设置或返回 selected 属性的值。
- text 设置或返回某个选项的纯文本值。
- disabled/form/id/value......
3、截图和代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>演示文档</title> 6 </head> 7 <body> 8 <form action="" name="form1"> 9 <select name="sel1" onchange="changeMenu()"> 10 <option selected>水果</option> 11 <option >蔬菜</option> 12 <option >肉类</option> 13 </select> 14 <select name="sel2"> 15 <option >葡萄</option> 16 <option >苹果</option> 17 <option >西瓜</option> 18 </select> 19 </form> 20 <script type="text/javascript"> 21 var arr=[]; 22 arr['水果']=['葡萄','苹果','西瓜']; 23 arr['蔬菜']=['萝卜','茄子','番茄']; 24 arr['肉类']=['猪肉']; 25 // alert(arr['水果']) 26 // alert(arr['蔬菜']) 27 // alert(arr['肉类']) 28 29 function changeMenu(){ 30 var sel1=document.form1.sel1 31 // alert(sel1.options[sel1.selectedIndex].text) 32 var list=arr[sel1.options[sel1.selectedIndex].text] 33 // alert(list) 34 var menu=document.form1.sel2; 35 remove(menu); 36 for(var i=0;i<list.length;i++){ 37 menu[i]=new Option(list[i],list[i]) 38 } 39 } 40 function remove(menu){ 41 for(var i=0;i<menu.options.length;i++){ 42 menu.options[i]=null; 43 } 44 } 45 </script> 46 </body> 47 </html>