动态给select添加选项的常用方法

最新推荐文章于 2023-06-20 14:36:11 发布

yanxiaohui5522

最新推荐文章于 2023-06-20 14:36:11 发布

阅读量1.4k

点赞数

分类专栏： javascript 文章标签： Web

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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]

yanxiaohui5522

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态给select添加选项的常用方法

web开发中，经常需要给select动态添加数据，常用的方法有几种：1.基于dom方式的添加2.使用innerHTML添加3.object方式添加以下是示例[code] var city = new Array(); city[0]="西安"; city[1]="乌鲁木齐"; city[2]="西宁"; ci...
复制链接

扫一扫