循环遍历Ajax结果时检查下拉选框中是否已存在指定值

嗨，我明白你现在遇到的困扰了——遍历Ajax返回的JSON数据填充select时，重复值老是去不掉，判断逻辑没起作用对吧？这大概率是你检查option是否存在的方式出了问题，我来给你捋捋怎么搞定它：

常见错误原因 #

你原来的代码里，可能尝试用了类似$('.SelectBox').find('option[text="' + sourcename + '"]')的写法，但jQuery并不支持直接通过text属性选择器来匹配选项文本，因为文本是元素的内容，不是HTML属性，所以这种判断永远会返回“不存在”，导致重复添加。

正确的循环内判断方法 #

改用filter方法来精准匹配选项的文本内容，同时加上trim()避免空格导致的误判：

for (var i = 0; i < result.length; i++) {
    var JsonResults = result[i];
    var sourcename = JsonResults.Source.DataSourceName.trim(); // 先去除首尾空格
    
    // 检查下拉框中是否已存在该文本的选项
    var optionExists = $('.SelectBox option').filter(function() {
        return $(this).text().trim() === sourcename;
    }).length > 0;

    if (!optionExists) {
        // 不存在则添加新选项
        $('.SelectBox').append('<option value="' + sourcename + '">' + sourcename + '</option>');
    }
}

更高效的优化方案：先去重再填充 #

如果返回的JSON数据量比较大，每次循环都查询DOM会影响性能，更优的做法是先对数据源去重，再一次性填充：

// 用Set自动去重，存储唯一的数据源名称
var uniqueSourceNames = new Set();

result.forEach(function(item) {
    var name = item.Source.DataSourceName.trim();
    uniqueSourceNames.add(name);
});

// 遍历去重后的集合，添加到下拉框
uniqueSourceNames.forEach(function(name) {
    $('.SelectBox').append('<option value="' + name + '">' + name + '</option>');
});

这个方法只需要遍历两次数据（一次去重，一次填充），避免了频繁的DOM查询，性能会好很多。

额外提醒 #

如果你的下拉选项value和显示文本不是同一个值（比如value是数据源ID，文本是名称），那去重的时候要依据ID来判断，避免同一个ID对应不同名称的情况，调整一下去重的逻辑即可。

内容的提问来源于stack exchange，提问作者Whirlwind991