js进阶 9-12 如何将数组的信息添加到下拉列表

一、总结

一句话总结：创建出select的option，然后selectElement的add方法加进 selectElement 即可

1、创建出select的option的两种方法：

new option() 和 createElement('option')

二、js进阶 9-12 如何将数组的信息添加到下拉列表

1、案例说明：数组数据添加到下拉列表

使用二维数组和下拉菜单相结合，实现多级联动菜单
使用createElement的方法

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 name="form1" action="">
 9         <select name="sel" size="3">
10         </select><br>
11         <input type="button" value="测试按钮" onclick="addopt()">
12     </form>
13 <script>
14 var arr=new Array('数组元素1','数组元素2','数组元素3','数组元素4')
15 var counts=arr.length;
16     function addopt(){
17         for(var i=0;i<counts;i++){
18             // document.form1.sel.options[i]=new Option (arr[i],i)
19             var opt=document.createElement('option')
20             opt.text=arr[i]
21             opt.value=i;
22             document.form1.sel.add(opt,undefined)
23         }
24         var opt2=document.createElement('option')
25             opt2.text='opt2'
26             document.form1.sel.add(opt2,1)
27     }
28 </script>
29 </body>
30 </html>