js实现select下拉option去重

原创于 2020-05-25 14:06:39 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在JavaScript中实现select下拉框选项去重的方法。针对业务需求，通过遍历JSON数据并利用indexOf()方法检查选项是否已存在，避免了重复项的显示，同时保留了后台数据的完整性。

js实现select下拉option去重

背景
解决方法：

背景

业务场景：通过接口获取到 json 数据，前台用select下拉框的方式展示。
业务需求导致的限制条件：
1. select展示的下拉数据不能重复。
2.后台接口返回的json类型的data不能因select展示重复移除重复的数据行，因为后期重复的数据行中其他不重复的数据还有用。
不能删除

解决方法：

indexOf() : 方法可返回某个指定的字符串值在字符串中首次出现的位置。
要检索的字符串值没有出现，则该方法返回 -1
注：方法对大小写敏感,

var html = "<option value=\"\">------请选择------</option>";
for (var i = 0;i<data.length; i++) {
	var options = "<option value ='"+data[i].ZSXM_DM+"'>" + data[i].ZSXM_MC + "</option>";
	if(html.indexOf(options) === -1){
		html += options;
	}
}
tr.find("select[name='ywsqkList.sz_dm']").html(html);