js删除select中重复项的实现代码

更新时间：2010年02月18日 11:26:27 作者：

使用嵌套循环来枚举重复项，然后移除。

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>删除select中重复项</title> <style type="text/css"> body{ text-align:center;} div{ width:400px; background:#f1f5fa; margin:auto; border:solid 1px #BFC9DB; padding:10px;} h4{ } a{text-align:right; display:block; font-size:12px;} </style> <script type="text/javascript"> /*定义全局函数$*/ function $(id){ return document.getElementById(id); } /*初始化select*/ function InitialSelectOption(id){ var oSel=$(id); var aOptions=["Wang Hongjian","Wang Hongjian","Nichoal Smith","Nichoal Smith","David Gates","David Gates","David Gates","Wang Hongjian","Wang Hongjian","Nichoal Smith","Nichoal Smith","David Gates","David Gates","David Gates"]; var i=0; oSel.options.length=0; while(i<aOptions.length){ var option=new Option(aOptions[i],i); oSel.options.add(option); i++; } oSel.setAttribute("size",i-1); $("btnDistinct").removeAttribute("disabled"); } /*删除重复项*/ function DistinctSelectOption(id){ var oSel=$(id); var i=0; while(i<oSel.options.length){ var j=i+1; while(j<oSel.options.length){ if(oSel.options[i].text==oSel.options[j].text){ oSel.options[j]=null;//不可使用oSel.options.remove(j)，因为不兼容firefox }else{ j++; } } i++; } oSel.setAttribute("size",i); $("btnDistinct").setAttribute("disabled","disabled"); } window.onload=function(){ /*初始化*/ $("btnInital").onclick=function(){InitialSelectOption("sel");}; /*删除重复项*/ $("btnDistinct").onclick=function(){DistinctSelectOption("sel");}; $("btnDistinct").setAttribute("disabled","disabled"); } </script> </head> <body> <div> <h4>删除select重复项演示</h4> <a href="https://www.jb51.net/" target="_blank" title="https://www.jb51.net/">https://www.jb51.net/</a> <hr /> <select id="sel" multiple="multiple" size="1"><option>待初始化…</select> <hr /> <button id="btnInital">初始化</button> <button id="btnDistinct">删除重复项</button> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

效果

来源:51obj

您可能感兴趣的文章:

js select 控制实现代码
用js控制select的一些比较不错的功能。
2009-04-04
js文本中搜索关键词输入效果
js文本中搜索关键词输入效果...
2007-10-10
js获取变量
js获取变量...
2006-08-08
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
多个元素(RADIO,CHECKBOX等)是否被选择，常用的就是下面的方法，大家可以研究下。
2009-02-02
js select 标签选定项的值获取代码
用js获取当前选定的select的值的函数
2009-03-03
关于表单的两点交互体验改进技巧
关于表单的两点交互体验改进技巧...
2007-02-02
如何识别上传前检测的图像是有效的方法
如何识别上传前检测的图像是有效的方法...
2007-02-02
js 操作select相关方法函数
select的操作实现代码。方便控制select的朋友。脚本之家之前提供很多相关的代码。
2009-12-12
通过ifame指向的页面高度调整iframe的高度
[红色]通过ifame指向的页面高度调整iframe的高度...
2006-10-10
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中...
2007-04-04

js删除select中重复项的实现代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具