您的位置：首页 > 运维架构

关于如何删除掉select中的option元素，兼容IE、fireFox

2010-03-26 22:50 579 查看

之前使用的代码是：

function delOption(oSel)// 删除option
{ 
if (oSel.selectedIndex>=0)
{
oSel.options.remove(oSel.selectedIndex); 
}
else
{
alert("请先至少选择一个关键字"); 
}
}

上述代码在IE下正常运行，但在Firefox下却报错：

oSel.options.remove is not a function.

最后发现只要作一下小改动就可兼容IE和fireFox

改动后的代码如下：

function delOption(oSel) // 删除option
{
if (oSel.selectedIndex>=0) {
oSel.remove(oSel.selectedIndex);
}
else {
alert("请先至少选择一个关键字");
}
}

上述两段代码的区别在于一个用了options，一个没用，即：

oSel.options.remove(oSel.selectedIndex);

oSel.remove(oSel.selectedIndex);

这两种写法IE都支持，但fireFox只支持后一种。

下面贴段完整的删除option的兼容IE、Firefox的实例代码，可一次删除多个被选中的options。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<head>
<title> 一次删除多个被选中的options ， 兼容IE、Firefox ...</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="author" content="枫岩,CnLei.y.l@gmail.com">
<meta name="copyright" content="http://www.cnlei.com" />
<meta name="description" content="一次删除多个被选中的options，兼容IE、Firefox ..." />
<mce:script type="text/javascript"><!--

function delOption(oSel)
{
if (oSel.selectedIndex>=0)
{
oSel.remove(oSel.selectedIndex);
delOption(oSel);
}
}
// --></mce:script>
</head>
<body>
<h3>一次删除多个被选中的options ， 兼容IE、Firefox ...</h3>
<form method="" action="">
<select class="SltBar" name="MySel" size="10" multiple="true">
<option value="IECN.NET">IECN.Net-JavaScript</option>
<option value="IECN.NET">IECN.Net-XHTML/CSS</option>
<option value="IECN.NET">IECN.Net-ASP/VBScript</option>
<option value="IECN.NET">IECN.Net-PHP/MySql</option>
<option value="IECN.NET">IECN.Net-.Net开发</option>
<option value="IECN.NET">IECN.Net-Java开发</option>
</select>
<input type="button" value="删除选中的option" onclick="delOption(this.form.MySel);" />
</form>
</body>
</html>

应用实例二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<head>
<title> 代码实例：添加、删除域名列表</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="author" content="枫岩,CnLei.y.l@gmail.com">
<meta name="copyright" content="http://www.cnlei.com" />
<meta name="description" content="一次删除多个被选中的options，兼容IE、Firefox ..." />
<mce:script type="text/javascript"><!--

function delOption(oSel)
{
if (oSel.selectedIndex>=0)
{
oSel.remove(oSel.selectedIndex);
delOption(oSel);
}
}
function addOption(oSel,sVal)
{
for(var i=0;i<oSel.length;i++)
{
if (oSel.options[i].value==sVal)
{
alert("已存在："+sVal+"/n/n请不要添加重复数据！");
return false;
}
}
var oOption=new Option(sVal,sVal);
oSel[oSel.length] = oOption;
}
// --></mce:script>
</head>
<body>
<h3>一次删除多个被选中的options ， 兼容IE、Firefox ...</h3>
<form method="" action="">
<input type="text" name="siteUrl" size="50" value="google.com" />
<input type="button" value="添加至列表" onclick="addOption(this.form.siteList,this.form.siteUrl.value);" />
<!-- 已有域名列表：-->
<select name="siteList" size="10" multiple="true" size="10" style="width:300px;">
<option value="265.com">265.com</option>
<option value="cnlei.com">cnlei.com</option>
<option value="iecn.net">iecn.net</option>
<option value="dodo.hk">dodo.hk</option>
</select>
<input type="button" value="删除选中的域名" onclick="delOption(this.form.siteList);" />(可一次性选中多个进行删除)
<input type="submit" class="InpBtn" value="保存已添加的域名列表" />
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航