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













<!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="http://www.51obj.cn/" target="_blank" title="http://www.51obj.cn/">http://www.51obj.cn/</a>











	<hr />











	<select id="sel" multiple="multiple" size="1"><option>待初始化…</select>











	<hr />











	<button id="btnInital">初始化</button>











	<button id="btnDistinct">删除重复项</button>











</div>











</body>











</html>




效果






查看演示效果 




Related posts:
  1. jquery学习笔记五 jquery实现表格隔行换色、锁定单元行、荧光棒、全选反选特效...
    2. 

  2. js 仿Photoshop鼠标滚轮控制输入框取值（修正兼容Chrome） js 仿Photoshop鼠标滚轮控制输入框取值。原理是监听鼠标滚轮事件；可将此效果继续发散到其他应用上，如图片缩放，页面缩放等。...
    3. 

  3. Jquery学习笔记（三） 详细讲解jquery高级选择器,实例综合讲解了几个选择器的使用，同时演示了使用jquery实现隔行换色、荧光棒特效、复选框checkbox全选反选效果...
    4. 

  4. CSS制作无图片圆角矩形 css无图片圆角矩形...
    5. 

  5. Jquery学习笔记（二） Jquery中基本选择器包括*,class,element,id及这种群组方式selector1,selector2,......
    6. 



以上关联文章由 Yet Another Related Posts Plugin 提供支持。