<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>선택에서 중복 항목 삭제</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> <div> <h4> </h4>중복 항목 선택 데모<a href="http://www.jb51.net/" target="_blank" title="http://www.jb51.net/"> </a>http://www.jb51.net/<hr> <select id="sel" multiple size="1"> <option></option></select>초기화 예정...<hr> <button id="btnInital"> </button>초기화<button id="btnDistinct"> </button>중복 항목 제거</div> [Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ] 효과 출처: 51obj /*定义全局函数$*/ 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"); }
