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

最新推荐文章于 2020-08-31 14:35:48 发布

Cyanapple_wen

最新推荐文章于 2020-08-31 14:35:48 发布

阅读量3.4k

点赞数

分类专栏： HTML JavaScript 文章标签： ie firefox function xhtml button input

本文链接：https://blog.csdn.net/Cyanapple_wen/article/details/5421341

版权

HTML 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

之前使用的代码是：

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"></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" οnclick="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"></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="添加至列表" οnclick="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="删除选中的域名" οnclick="delOption(this.form.siteList);" />(可一次性选中多个进行删除) <input type="submit" class="InpBtn" value="保存已添加的域名列表" /> </form> </body> </html>