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

ttx9n · 发表于 2010-2-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> 
 
<h4>删除select重复项演示</h4> 
<a href="https://www.jb51.net/www.jb51.net/" target="_blank" title="https://www.jb51.net/www.jb51.net/">https://www.jb51.net/www.jb51.net/</a> 
<hr /> 
<select id="sel" multiple="multiple" size="1"><option>待初始化…</select> 
<hr /> 
<button id="btnInital">初始化</button> 
<button id="btnDistinct">删除重复项</button> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

效果

来源:51obj

dm00ji1s · 发表于 2022-9-8 06:12:23

谢谢下载来看看

shw5ovr · 发表于 2023-4-18 22:58:18

收下来看看怎么样

70r45_zs · 发表于 2023-6-24 00:07:23

强烈支持楼主ing……

kwzc65wdj · 发表于 2023-9-4 05:50:53

感谢楼主分享

mkonji · 发表于 2023-10-17 07:15:14

谢谢下载来看看

shw5ovr · 发表于 2023-10-24 06:28:34

来看看怎么样

lsc54 · 发表于 2023-10-28 17:16:31

天天源码社区www.tiantianym.com

u6h2m4 · 发表于 2023-11-12 07:56:14

好人好人好人好人

w18pvaep · 发表于 2023-11-16 16:36:40

看看看看看看看看看看看看看看看看看看看看看看看看看看看

账号		自动登录	找回密码
密码			立即注册

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

相关帖子