JavaScript动态为下拉框添加选项

web开发中，经常需要给select动态添加数据，常用的方法有几种：

1.基于dom方式的添加

2.使用innerHTML添加

3.object方式添加

1 < html >
2 < head >
3 < script >
4
5 var city = new Array();
6 city[ 0 ] = " 西安 " ;
7 city[ 1 ] = " 乌鲁木齐 " ;
8 city[ 2 ] = " 西宁 " ;
9 city[ 3 ] = " 北京 " ;
10 function objectF()
11 {
12
13 var s = document.getElementById( " object " );
14 for (var i = 0 ;i < city.length;i ++ )
15 {
16 var option = new Option(city[i],i);
17 s.options[i] = option;
18
19 }
20 }
21 function domF()
22 {
23 var s = document.getElementById( " dom " );
24 for (var i = 0 ;i < city.length;i ++ )
25 {
26 var option = document.createElement( " option " );
27 var text = document.createTextNode(city[i]);
28 option.appendChild(text);
29 option.value = i;
30 s.appendChild(option);
31
32 }
33 }
34 function innerF()
35 {
36
37 var sel = document.getElementById( " inner " );
38 var str = " <select> " ;
39 for (var i = 0 ;i < city.length;i ++ )
40 {
41 strstr = str + " <option value=' " + i + " '> " + city[i] + " </option> "
42 }
43 strstr = str + " </select> " ;
44 sel.innerHTML = str;
45 }
46 </ script >
47 </ head >
48 < body >
49 < form >
50 < table >
51 < tr >
52 < td >
53 < select ></ select >
54 </ td >
55 < td >
56 < select ></ select >
57 </ td >
58 < td >
59 < div >
60 < select ></ select >
61 </ div >
62 </ td >
63 </ tr >
64 < tr >
65 < td >< input type = " button " value = " dom " ></ td >
66 < td >< input type = " button " value = " object " ></ td >
67 < td >< input type = " button " value = " inner " ></ td >
68 </ tr >
69 </ table >
70 </ body >
71
72