JQuery克隆select选项追加到目标下拉框前判断重复的实现方法咨询

核心判断逻辑以option的value属性作为唯一标识，因为同一个省份的value值是固定唯一的，修改后的addRegions函数如下：

function addRegions()
{
    var regions = $("#LISTE_DEP > option").clone();
    var $geoSelected = $("#GEO_SELECTED"); // 提前缓存目标列表DOM，减少重复查询
    for(i = 0; i < regions.length;i++){
        var currentVal = $(regions[i]).val();
        // 判断目标列表中是否已存在相同value的option
        if ($geoSelected.find(`option[value="${currentVal}"]`).length === 0) {
            $geoSelected.append(regions[i]);      
        }
    }
}

逻辑说明 #

• 原来的has()方法无法匹配克隆元素的原因是：克隆生成的DOM元素和已存在的元素是完全独立的两个DOM实例，哪怕内容、属性完全一致，也会被识别为不同对象，因此无法用来判断是否重复。
• 改用value属性作为判断依据，只要目标列表中存在相同value的option，就跳过追加，从根源避免重复。

如果要进一步优化性能，也可以用筛选器批量筛选出未存在的option再一次性追加，不用循环逐个判断：

function addRegions()
{
    var $geoSelected = $("#GEO_SELECTED");
    // 筛选出LISTE_DEP里value不在目标列表中的option，克隆后一次性追加
    $("#LISTE_DEP > option").filter(function() {
        return $geoSelected.find(`option[value="${$(this).val()}"]`).length === 0;
    }).clone().appendTo($geoSelected);
}

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