js实现重复内容保留一个-优快云博客

本文链接：https://blog.youkuaiyun.com/zw1_csdn/article/details/101208146

本文介绍了一种使用JavaScript实现的下拉列表去重方法，通过遍历数组并利用indexOf方法检查元素是否已存在，从而创建一个无重复项的新数组。这种方法可以改善用户体验，避免在下拉菜单中出现重复选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务场景：下拉列表中存在多个重复内容，虽不影响业务查询但是体验效果较差，这里做了判重取唯一

js代码：

function(data){//ajax返回数据，前面内容已省略
               /* $("#appName_select").html(""); */
               $("#scenario").html("");
               var vers = data;
               var len=vers.length;
               var res = "";
               var newArr=[];
               var name=[];

// 以下for为去重核心部分
               for(var i = 0; i < len; i++){
                   if(name.indexOf(vers[i].casename)==-1){//判断newArr中casename是否存在
                       newArr.push(vers[i]);//只记录casename不存在的内容
                       name.push(vers[i].casename);//获取casename数组
                   }

// 遍历新的数组，拼接列表内容
for(var j=0;j<newArr.length;j++){
res += "<option>" + newArr[j].casename + "</option>";
}

               $("#appName_select option:contains('')").attr("selected", "selected"); */
               $("#scenario").append(res);
               $("#scenario option:contains('')").attr("selected", "selected");
           }

               }