select标签的几个小问题
select标签的几个问题
<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>