Eliminare le voci duplicate da una casella di selezione

Question

Come dovrei, utilizzando jQuery, rimuovere le dups

 <option value="English">English</option> 
     <option value="English">English</option> 
     <option value="English">English</option> 
     <option value="Geology">Geology</option> 
     <option value="Geology">Geology</option> 
     <option value="Information Technology">Information Technology</option> 
     <option value="Music">Music</option> 
     <option value="Music">Music</option> 
     <option value="Zoology">Zoology</option> 

Answer 1

Si può fare in questo modo:

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

Give it a try here, è un approccio semplice, noi' semplicemente mantenendo un array di valori trovati, se non abbiamo trovato il valore, aggiungilo all'array (.push()), se abbiamo abbiamo trovato il valore, questo è un dupe che abbiamo trovato prima, .remove() esso.

Questo esegue solo la scansione del numero <select> una volta, riducendo al minimo l'attraversamento del DOM, che è un lotto più costoso rispetto alle operazioni dell'array. Inoltre stiamo usando $.inArray() invece di .indexOf() quindi funziona correttamente in IE.

---

Se si desidera una soluzione meno efficiente ma più breve (solo per l'illustrazione, utilizzare il primo metodo!):

$('select option').each(function() { 
    $(this).prevAll('option[value="' + this.value + '"]').remove(); 
}); 

You can test it here, questo rimuove tutti i fratelli con lo stesso valore, ma è molto di più costoso rispetto al primo metodo (DOM Traversal è costoso, e più motore di selezione chiama qui, molti altri). Stiamo utilizzando .prevAll() perché non puoi semplicemente rimuovere .siblings() all'interno di uno .each(), causerà alcuni errori con il ciclo poiché si aspettava il prossimo figlio.

Answer 2

Il modo più semplice che mi venne in mente stava usando fratelli

$("select>option").each(function(){ 

var $option = $(this); 

$option.siblings() 
     .filter(function(){ return $(this).val() == $option.val() }) 
     .remove() 


}) 

Answer 3

Dall'alto della mia testa, non testati:

$('#mySelect option').each(function(){ 
    if ($('#mySelect option[value="'+$(this).val()+'"]').length) $(this).remove(); 
}); 

Answer 4

uso Prova sotto codice per rimuovere le opzioni duplicati:

$("#color option").val(function(idx, val) { 
 
    $(this).siblings("[value='"+ val +"']").remove(); 
 
});

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

 
<select class ="select-form" name="color" id="color"> 
 
    <option value="">Select Color</option> 
 
    <option value="1">Color 1</option> 
 
    <option value="2">Color 2</option> 
 
    <option value="3">Color 3</option> 
 
    <option value="3">Color 3</option> <!-- will be removed since value is duplicate --> 
 
    <option value="2">Color 2</option> <!-- will be removed since value is duplicate --> 
 
</select>