select标签的几个问题

最新推荐文章于 2025-05-22 12:28:47 发布

bld_work

最新推荐文章于 2025-05-22 12:28:47 发布

阅读量150

点赞数

分类专栏： web 文章标签： IE C C++ C# 数据结构

web 专栏收录该内容

1 篇文章

订阅专栏

本文介绍使用JavaScript操作HTML中的Select元素的方法，包括从最后或最开始删除选项、清空并重新添加选项等内容。通过示例展示了不同操作对Select元素的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>

	function delFromLast(){
		var s=document.getElementById("a");
		for(var i=s.options.length;i>=0;i--){
			s.remove(i);//最后结果是option全部删除，
		}
	}
	function delFromFirst(){
		var s=document.getElementById("a");
		for(var i=0;i<s.options.length;i++){
			s.remove(i);//最后结果是留下2.4.6三项。因为remove(0)时，原来的1会放置到0的位置,后面的也逐个前移，然后remove(1)时，其实
//是remove的2.这里跟数组的结构有关，因为数组是不允许有洞的。
		}
	}


	var oldOptions=null;
	var oldOptionReal=new Array();

function add(){
	var s=document.getElementById("a");
	s.options.length=0;
	alert(oldOptions.length);//此时为0，所以下面不会执行。此处可以发现对象是引用对象还是值对象。在C#中，数组中一般是保存了值对象，这样看来js中也是一///样,而java中数据则还是保存的引用。当然c#中可以显式的设置要保存引用还是值。
	for(var i=0;i<oldOptions.length;i++){
	s.add(oldOptions[i]);
	}
}

function addReal(){
	var s=document.getElementById("a");
	s.options.length=0;
	alert(oldOptionReal.length);//此时为6，所以下面顺利的将所有option再加入到select中
	for(var i=0;i<oldOptionReal.length;i++){
	alert(oldOptionReal[i].text);
	s.add(oldOptionReal[i],4);//注意此处有兼容问题。 
	/*
	IE: s.add(options[i]) 在最后面加入一个options
		s.add(optons[i],null) 报错
	Other:
		s.add(options[i],null)在最后面加入一个options
	
	s.add(options[i],2)都是在指定index上加入一个options.如果当前select的最大index比这个值小，取最大index。

	*/
	}
}

</script>	
</HEAD>

<BODY>
<select id="a">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	<option>6</option>
</select>
<input onclick="delFromLast();" type="button"/>
<input onclick="delFromFirst();" type="button"/>
<input onclick="add();" type="button"/>
<input onclick="addReal();" type="button"/>
<script>
oldOptions=document.getElementById("a").options;

for(var i=0;i<oldOptions.length;i++){
	oldOptionReal.push(oldOptions[i]);
}
</script>