javascript 删除select中重复项

时间：2022-07-02 14:41:38 编辑：袖梨来源：一聚教程网

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.***w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

提示：您可以先修改部分代码再运行

<title>删除select中重复项</title> 
<style type="text/<a href=" http: target="_blank">css"> 
body{ text-align:center;} 
div{  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>

<div> 
<h4>删除select重复项演示</h4> 
 
<hr> 
<select id="sel" multiple size="1"><option>待初始化…</option></select> 
<hr> 
<button id="btnInital">初始化</button> 
<button id="btnDistinct">删除重复项</button> 
</div>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

javascript 删除select中重复项

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程