关于如何删除掉select中的option元素，兼容IE、Firefox ...
作者: CNLei
之前使用的代码是：
function delOption(oSel){ // 删除option
if (oSel.selectedIndex>=0) {
oSel.options.remove(oSel.selectedIndex);
} else {
alert("请先至少选择一个关键字");
};
}
if (oSel.selectedIndex>=0) {
oSel.options.remove(oSel.selectedIndex);
} else {
alert("请先至少选择一个关键字");
};
}
上述代码在IE下正常运行，但在Firefox下却报错：
oSel.options.remove is not a function.
最后发现只要作一下小改动就可兼容IE和FF ：）
改动后的代码如下：
function delOption(oSel){ // 删除option
if (oSel.selectedIndex>=0) {
oSel.remove(oSel.selectedIndex);
} else {
alert("请先至少选择一个关键字");
};
}
if (oSel.selectedIndex>=0) {
oSel.remove(oSel.selectedIndex);
} else {
alert("请先至少选择一个关键字");
};
}
上述两段代码的区别在于一个用了options，一个没用，即：
oSel.options.remove(oSel.selectedIndex);
oSel.remove(oSel.selectedIndex);
这两种写法IE都支持，但FF只支持后一种。
下面贴段完整的删除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 ..." />
<script type="text/javascript">
function delOption(oSel){
if (oSel.selectedIndex>=0) {
oSel.remove(oSel.selectedIndex);
delOption(oSel);
}
}
</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>
<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 ..." />
<script type="text/javascript">
function delOption(oSel){
if (oSel.selectedIndex>=0) {
oSel.remove(oSel.selectedIndex);
delOption(oSel);
}
}
</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 ..." />
<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;
}
</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);" /><br />
已有域名列表：<br />
<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);" />(可一次性选中多个进行删除)<br />
<input type="submit" class="InpBtn" value="保存已添加的域名列表" />
</form>
</body>
</html>
<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 ..." />
<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;
}
</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);" /><br />
已有域名列表：<br />
<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);" />(可一次性选中多个进行删除)<br />
<input type="submit" class="InpBtn" value="保存已添加的域名列表" />
</form>
</body>
</html>
