憨厚生

----Java's Slave----
***Java's Host***
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  165 随笔 :: 17 文章 :: 90 评论 :: 0 Trackbacks
转 动态给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 >   
posted on 2007-04-22 16:48 二胡 阅读(138) 评论(0)  编辑  收藏 所属分类: JS

只有注册用户登录后才能发表评论。
网站导航: