web开发中,经常需要给select动态添加数据,常用的方法有几种:
1.基于dom方式的添加
2.使用innerHTML添加
3.object方式添加
以下是示例
[code]
<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++)
{
str = str + "<option value='"+i+"'>"+city[i]+"</option>"
}
str=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>
</html>
[/code]
1.基于dom方式的添加
2.使用innerHTML添加
3.object方式添加
以下是示例
[code]
<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++)
{
str = str + "<option value='"+i+"'>"+city[i]+"</option>"
}
str=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>
</html>
[/code]