JavaScript实现Select下拉框去重功能
作者:木棉时间:2026-10-24 15:14:36浏览:580
本文介绍如何使用JavaScript删除HTML Select元素中的重复选项。通过获取Select对象,遍历其Option集合,利用临时数组记录已出现的值,从而筛选出唯一选项并重新构建Select内容。
Select下拉框去重实现
<!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 </head> <body> <div> <h4>删除select重复项演示</h4> https://www.jb51.net/ <hr /> <select id="sel" multiple="multiple" size="1"><option>待初始化…</select> <hr /> <button id="btnInital">初始化</button> <button id="btnDistinct">删除重复项</button> </div> </body> </html> 注意:若引入外部JavaScript文件,需刷新页面方可执行。
运行效果

来源:51obj
作者最新文章
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
