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