`
cc_index
  • 浏览: 5290 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

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

阅读更多 
<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]进行数据的添加。

 

分享到：
| JavaScript - 字符串截取函数substr()与su ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics