Question

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

的选项列表

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

我有脚本可以让我查看manufacturer_chevy并删除重复'，但我需要value="manufacturer_chevy"＆amp;的任何重复选项。要删除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。

代码：

＆＃13;

$(".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();
});

＆＃13;

<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>

＆＃13;

Answer 3

使用Document.querySelectorAll()，Node.getAttribute()和Node.removeChild()方法

纯 JavaScript 解决方案：

纯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/

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

3 个答案: