增加页面中下拉列表框中的列表项目

最新推荐文章于 2021-06-07 13:37:33 发布

煜楷

最新推荐文章于 2021-06-07 13:37:33 发布

阅读量832

点赞数 1

CC 4.0 BY-SA版权

分类专栏： WEB前端文章标签：下拉列表 SELECT JS HTML

本文链接：https://blog.youkuaiyun.com/netuser1937/article/details/54911338

WEB前端专栏收录该内容

114 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态地向HTML页面中的下拉列表框添加新选项的方法。通过一个按钮触发事件，每次点击都会在下拉列表中增加一个新条目，展示了基本的DOM操作技术和事件处理技巧。

效果如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>增加页面中下拉列表框中的列表项目</title>
</head>
<script language="javascript" type="text/javascript">
var i,txt,val;
window.onload = function() {
	var btnobj = document.getElementById("testbtn");
	if(btnobj)
	{
		btnobj.onclick = function() { InsertItem() };
	}
	i=0;
}

function InsertItem()
{
	i++;
	var testlistobj = document.getElementById("testlist");
	var option;
	
	txt = "新增下拉列表项目" + i.toString();
	val = txt + i.toString();
	
	option = new Option(txt, val);
	if(testlistobj)
	{
		testlistobj.options.add(option);
	}
}
</script>
<body>
<select id="testlist">
</select>
<input id="testbtn" type="button" value="增加列表项目">
</body>
</html>