删除共享 2 个值的重复下拉选项

Question

有很多 javascript 和 jQuery 允许您根据值删除重复的选择选项，但我需要基于 2 个值。目前，我的下拉菜单会生成一个选项列表，格式如下：

<option data-id="truck" data-value="Manufacturer_Chevy" value="manufacturer_chevy">Chevy</option>

我有脚本可以让我查看manufacturer_chevy 并删除重复的内容，但我需要删除任何带有value="manufacturer_chevy" 和data-value="Manufacturer_Chevy" 的重复选项。

基于 1 个值的一对：

$(".tag-base option").each(function() {
$(this).siblings("[value='"+ this.value+"']").remove();
});

还有……

var found = [];
$(".tag-base option").each(function() {
if($.inArray(this.value, found) != -1) $(this).remove();
found.push(this.value);
});

有什么想法吗？提前致谢

Answer 1

尝试像这样使用Multiple Attribute Selector：

$(".tag-base option").each(function() {
    var $t = $(this);
    $t.siblings("[value='"+ $t.val() +"'][data-id='" + $t.data("id") + "']").remove();
});

这将从您的下拉列表中查找并删除重复项。在这种情况下，重复项被定义为“与另一个共享相同值和数据 ID 的选项。”

编辑：根据您的评论，您希望匹配值和数据-id，而不是数据-值。我已经编辑了我的代码以反映这一点。

Answer 2

要选择具有对应于指定值的 data-value 属性的所有选项，您可以使用filter。

代码：

$(".tag-base option").each(function(i, ele) {
  var val = ele.value;
  var eleToRemove = $(ele).siblings("[value='" + val + "']").filter(function(i, e) {
    var dVal = $(e).data('value');
    return dVal.toLowerCase() == val.toLocaleString();
  }).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select class="tag-base">
    <option data-id="truck" data-value="Manufacturer_Chevy" value="manufacturer_chevy">Chevy</option>
    <option data-id="truck" data-value="Manufacturer_Chevy" value="manufacturer_chevy">Chevy</option>
    <option data-id="truck" data-value="Manufacturer_Chevy" value="manufacturer_chevy">Chevy</option>
    <option data-id="truck" data-value="Manufacturer_Chevy" value="manufacturer_chevy">Chevy</option>
    <option data-id="truck" data-value="Manufacturer_Chevy" value="manufacturer_chevy">Chevy</option>
</select>

Answer 3

纯 JavaScript 使用Document.querySelectorAll()、Node.getAttribute() 和Node.removeChild() 方法的解决方案：

纯 Javascript 方法比 JQuery 的 $(el).siblings(...) 方法快 10 倍以上！

var attr_counts = {};
    
document.querySelectorAll('#truckList option').forEach(function(n){
    var hash = n.getAttribute('data-value') + n.getAttribute('value');
    (typeof this[hash] === 'undefined')? this[hash] = 1 : this[hash]++;
    if (this[hash] > 1) {
        n.parentNode.removeChild(n);
    }
}, attr_counts);

<select id='truckList'>
<option data-id="truck" data-value="Manufacturer_Chevy" value="manufacturer_chevy">Chevy</option>
<option data-id="truck" data-value="Manufacturer_Honda" value="manufacturer_honda">Honda</option>
<option data-id="truck" data-value="Manufacturer_Other" value="manufacturer_other">Other</option>
<option data-id="truck" data-value="Manufacturer_Chevy" value="manufacturer_chevy">Chevy</option>
<option data-id="truck" data-value="Manufacturer_GMC" value="manufacturer_gmc">GMC</option>
<option data-id="truck" data-value="Manufacturer_Chevy" value="manufacturer_chevy">Chevy</option>
<option data-id="truck" data-value="Manufacturer_GMC" value="manufacturer_gmc">GMC</option>
<option data-id="truck" data-value="Manufacturer_Honda" value="manufacturer_honda">Honda</option>
</select>

https://jsfiddle.net/t7cnt1xx/2/