JavaScript - select对象的option清空、添加处理

最新推荐文章于 2020-07-01 20:43:40 发布

原创最新推荐文章于 2020-07-01 20:43:40 发布 · 715 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#php #javascript #ViewUI

[ JavaScript ] 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种高效批量操作HTML下拉框选项的方法，包括创建、添加及清除大量选项的具体实现方式，并对比了不同方法的性能差异。

<html>
<head>
<script type="text/javascript">
	window.onload = function(){
		var startTime = new Date().getTime(); // 开始时间

		// 创建文档碎片
		var oFragmeng = document.createDocumentFragment();
		var obj = document.getElementById('ct');
		for(var i=0; i<10000; i++){
			var op = document.createElement("option");
			op.innerHTML = "t_" + i;
			op.value = "v_" + i;
			oFragmeng.appendChild(op);
		}
		obj.appendChild(oFragmeng);

		var endTime = new Date().getTime(); // 结束时间
		alert("耗时：" + (endTime - startTime) + " 毫秒！");
	}

	// 清空列表框元素
	// 方式一
	function clearOptionsV1(id){
		document.getElementById(id).options.length = 0;
	}
	// 方式二
	function clearOptionsV2(id){
		document.getElementById(id).innerHTML = "";
	}
	// 方式三
	function clearOptionsV3(id){
		var selectObj = document.getElementById(id);
		var parentNode = selectObj.parentNode;
		var newSelectObj = selectObj.cloneNode(false);
		parentNode.replaceChild(newSelectObj, selectObj);
	}

	// 添加下拉框元素
	// 方式一
	function addOptionsV1(id){
		var obj = document.getElementById(id);
		obj.options.add(new Option("V1", "v1"));
	}
	// 方式二
	function addOptionsV2(id){
		var obj = document.getElementById(id);
		var op = document.createElement("option");
		op.innerHTML = "V2";
		op.value = "v2";
		obj.appendChild(op);
	}
	// 方式三
	function addOptionsV3(id, iLength){
		var obj = document.getElementById(id);
		obj.options.length = iLength;
		for(var i=0; i<iLength; i++){
			obj.options[i].text = "V3_" + i;
			obj.options[i].value = "v3_" + i; 
		}
	}
</script>
</head>
<body>
	<input type="button" value="[清空V1]" onclick="clearOptionsV1('ct');">
	<input type="button" value="[清空V2]" onclick="clearOptionsV2('ct');">
	<input type="button" value="[清空V3]" onclick="clearOptionsV3('ct');"><br>
	<input type="button" value="[添加V1]" onclick="addOptionsV1('ct');">
	<input type="button" value="[添加V2]" onclick="addOptionsV2('ct');">
	<input type="button" value="[添加V3]" onclick="addOptionsV3('ct', 100);"><hr>
	<select id="ct">
		<option value="1">a1</option>
		<option value="2">a2</option>
		<option value="3">a3</option>
		<option value="4">a4</option>
		<option value="5">a5</option>
		<option value="6">a6</option>
	</select>
</body>
</html>

Ps：如果使用[清空V3]后，则不能使用[添加V2]进行数据的添加。