动态给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 >   
  

如何清空select里面的option  

四种方法：（以下child指某select）

1、循环将option赋值为null；

function delAllItems(child)
{
 for(var i=child.options.length-1; i>=0; i--)
 {
   child.options[i] = null;
  }
}

2、循环用remove将option删除掉

function delAllItems(child)
{
for(var i=child.options.length-1; i>=0; i--)
{
child.remove(i);
}
}

3、直接将innerHTML赋值""

function delAllItems(child)
{
 child.innerHTML = "";
}

4、直接将length赋值为0

function delAllItems(child)
{
   child.options.length=0
}