2つの値を共有して重複ドロップダウンオプションを削除します

Question

値に基づいて重複した選択オプションを削除することができる多くのjavascript & jQueryがありますが、2つの値に基づいている必要があります。現在、私のドロップダウンは以下のようにフォーマットされたオプションのリストを生成します：

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

を私は私がmanufacturer_chevyを見て、DUPを削除することができますスクリプトを持っている、しかし、私は、除去すべき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を別のものと共有するオプション」として定義されています。

EDIT：あなたのコメントを1として、あなたは値をDATA-ない、値とデータ - IDに一致させるために探していました。これを反映するように私のコードを編集しました。

Answer 2

指定した値に対応するデータ値属性ですべてのオプションを選択するには、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のアプローチは10倍以上速くよりJQue ryの$(el).siblings(...)アプローチ！

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/