冷面阎罗

低调做人&&高调做事
随笔 - 208, 文章 - 3, 评论 - 593, 引用 - 0
数据加载中……

动态给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-03-30 15:54 冷面阎罗 阅读(3854) 评论(2)  编辑  收藏

评论

# re: 动态给select添加选项的常用方法   回复  更多评论   

garb
2015-04-26 12:09 | 自行车

# re: 动态给select添加选项的常用方法   回复  更多评论   

第三方菲菲
2015-04-26 12:09 | 自行车

只有注册用户登录后才能发表评论。


网站导航: