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

最新推荐文章于 2021-03-01 15:22:24 发布

iteye_13697

最新推荐文章于 2021-03-01 15:22:24 发布

阅读量614

点赞数

分类专栏： [ JavaScript ] 文章标签： php javascript ViewUI

本文链接：https://blog.csdn.net/iteye_13697/article/details/82405752

版权

[ JavaScript ] 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<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]" οnclick="clearOptionsV1('ct');">
	<input type="button" value="[清空V2]" οnclick="clearOptionsV2('ct');">
	<input type="button" value="[清空V3]" οnclick="clearOptionsV3('ct');"><br>
	<input type="button" value="[添加V1]" οnclick="addOptionsV1('ct');">
	<input type="button" value="[添加V2]" οnclick="addOptionsV2('ct');">
	<input type="button" value="[添加V3]" οnclick="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]进行数据的添加。

iteye_13697

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript - select对象的option清空、添加处理

&lt;html&gt;&lt;head&gt;&lt;script type="text/javascript"&gt; window.onload = function(){ var startTime = new Date().getTime(); // 开始时间 // 创建文档碎片 var oFragmeng = document.createDocume...
复制链接

扫一扫

专栏目录