动态给select添加选项的常用方法

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

1.基于dom方式的添加

2.使用innerHTML添加

3.object方式添加

以下是示例

< html >   
< head >   
< script >   
  
 var city  =   new  Array();   
 city[ 0 ] = " 西安 " ;   
 city[ 1 ] = " 乌鲁木齐 " ;   
 city[ 2 ] = " 西宁 " ;   
 city[ 3 ] = " 北京 " ;   
 function objectF()   
  {   
  
  var s  =  document.getElementById( " object " );   
   for (var i = 0 ;i < city.length;i ++ )   
   {   
   var option  =   new  Option(city[i],i);   
   s.options[i] = option;   
      
  }    
 }    
 function domF()   
  {   
  var s  =  document.getElementById( " dom " );   
   for  (var i = 0 ;i < city.length;i ++ )   
   {   
   var option  =  document.createElement( " option " );   
   var text  =  document.createTextNode(city[i]);   
   option.appendChild(text);   
   option.value = i;   
   s.appendChild(option);   
     
  }    
 }    
 function innerF()   
  {   
  
  var sel  =  document.getElementById( " inner " );   
  var str  =   " <select> " ;   
   for  (var i = 0 ;i < city.length;i ++ )   
   {   
   strstr  =  str  +   " <option value=' " + i + " '> " + city[i] + " </option> "    
  }    
  strstr = str + " </select> " ;   
  sel.innerHTML = str;   
 }    
</ script >   
</ head >   
< body >   
< form >   
< table >   
  < tr >   
   < td >   
    < select  ></ select >   
   </ td >   
   < td >   
    < select  ></ select >   
   </ td >   
   < td >   
    < div  >   
     < select ></ select >   
    </ div >   
   </ td >   
  </ tr >   
  < tr >   
   < td >< input type = " button "  value = " dom "   ></ td >   
   < td >< input type = " button "  value = " object "   ></ td >   
   < td >< input type = " button "  value = " inner "   ></ td >   
  </ tr >   
</ table >   
</ body >