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 >
< 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 >