动态生成下拉列表

使用DOM及诶动态生成select下拉列表
用数组保存下拉列表的数据内容
使用一个按钮控制加载下拉列表中的内容
原html代码

<html>
	<head>
		<title>动态生成下拉列表数据</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		选择你所在的城市<select id="city" value="city"><option value="0">========请选择你所在的城市=========</potion></select>
		<input type="button" value="加载下拉列表数据" />
	</body>
</html>

页面效果

在这里插入图片描述

现在想要使用javascript代码实现点击下拉列表数据按钮之后,出现下拉列表数据

	<script type="text/javascript">
		window.onload = function(){
			//取得下拉列表元素
			var butEle = document.getElementById("but");
			//为下拉列表元素定义绑定事件
			butEle.addEventListener("click",function(){loadData();},false);
		}
		//加载下拉列表数据的方法
		function loadData(){
			//保存下拉列表显示内容
			var cityValue = new Array("北京","上海","广州","杭州","无锡");
			//保存下拉列表项id值
			var cityIds = new Array(1,2,3,4,5);
			//取得下拉列表元素
			var selectEle = document.getElementById("city");
			//创建option元素
			for(var x = 0; x < cityIds.length; x++){
				var optEle = document.createElement("option");
				optEle.setAttribute("id",cityIds[x]);
				optEle.appendChild(document.createTextNode(cityValue[x]));
				//将option元素添加为select子元素
				selectEle.appendChild(optEle);
			}
		}
	</script>

页面效果

在这里插入图片描述

此时会出现一个问题,就是如果连续点击"加载下拉列表数据"的按钮,会出现一直累加下拉列表项的问题,

在这里插入图片描述

要解决这个问题可以,在每次动态生成"option"元素是,将select元素的长度设置为1

//取得下拉列表元素
var selectEle = document.getElementById("city");
//将下拉列表选项清空
selectEle.length = 1;

还有一种方式是定一个删除"option"元素的方法,在动态生成option元素时,删除原来的option
删除原来的下拉列表的option

		//输入一个下拉列表的父元素,删除从第二个开始的所有子元素option
		function deleteOption(selectEle){
		//获取所有的"option"元素
			var optionEles = document.getElementsByTagName("option");
			var len = optionEles.length;
			for(var x = 0 ; x < len; x ++){
				if(optionEles[1] != undefined){
					selectEle.removeChild(optionEles[1]);
				}
			}
		
		}

在动态生成下拉列表的时候删除原有的option元素

		window.onload = function(){
			//取得下拉列表元素
			var butEle = document.getElementById("but");
			//为下拉列表元素定义绑定事件
			butEle.addEventListener("click",function(){loadData();},false);
		}
		//加载下拉列表数据的方法
		function loadData(){
			//保存下拉列表显示内容
			var cityValue = new Array("北京","上海","广州","杭州","无锡");
			//保存下拉列表项id值
			var cityIds = new Array(1,2,3,4,5);
			//取得下拉列表元素
			var selectEle = document.getElementById("city");
			//删除原有的option元素
			deleteOption(selectEle);
			//创建option元素
			for(var x = 0; x < cityIds.length; x++){
				var optEle = document.createElement("option");
				optEle.setAttribute("id",cityIds[x]);
				optEle.appendChild(document.createTextNode(cityValue[x]));
				//将option元素添加为select子元素
				selectEle.appendChild(optEle);
			}
		}

动态生成下拉列表

猜你喜欢