删除下拉列表中的选项

 

一 介绍

删除下拉列表中的单个选项可以用select对象的remove()、focus()方法和selectedIndex属性来实现。

1、remove()方法

该方法用于在下拉列表中删除指定的option对象。

myselect.remove(index)

myselect：当前要删除选项的select对象的名称。

index：要删除的option对象的下标。

例如，删除myselect下拉列表中的第2个选项。代码如下：

myselect.remove(1)

2、focus ()方法

该方法将焦点移到当前对象上。

myselect.focus()

3、selectedIndex属性

该属性用于获取select对象中当前被选中的option对象的下标。

n=myselect.selectedIndex

n：存储当前被选中的option对象的下标值。当没有选中option对象时，该属性的值为-1。

 

二 应用

本应用自动在滚动列表中选中第一个选项，然后单击“删除”按钮将其删除，用户也可以通过鼠标选中指定的选项进行删除。

 

三 代码

<form name="form1" method="post" action="">
 <select style="width:100px " name="select1" size="4" multiple>
 <option value="1">第一</option>
 <option value="2">第二</option>
 <option value="3">第三</option>
 <option value="4">第四</option>
 </select>
 <input type="button" name="Button" value="删除" onclick="selectDelete(document.form1.select1,this)">
</form>
<script language="javascript">
<!--
function selectDelete(sname,bname) //该方法用于删除当前被选中的选项
{
	if (sname.length>0)
 	{
  		if (sname.selectedIndex>=0)
  			sname.remove(sname.selectedIndex);
  		if (sname.length==0)
  			bname.disabled=true;
 	}
 	selectfocus(document.form1.select1);
}
function selectfocus(sname) //该方法用于选中select对象中的第一个选项
{
	if (sname.length>0)
 	{
  		sname.focus();
  		sname.options[0].selected=true; //使滚动列表中的第一个选项为选中状态
 	}
}
selectfocus(document.form1.select1) //页面加载后自动调用selectfocus()方法
//-->
</script>

 

四 运行效果