Supprimer les doublons d'une boîte de sélection

Question

Comment pourrais-je, en utilisant jQuery, retirez les 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

Vous pouvez le faire comme ceci:

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

Give it a try here, il est une approche simple, nous » Si vous n'avez pas trouvé la valeur, ajoutez-la au tableau (.push()), si nous avons trouvé la valeur, celui-ci est une dupe que nous avons trouvée plus tôt, .remove().

Ceci ne fait que parcourir le <select> une seule fois, en minimisant la traversée de DOM qui est un lot plus coûteuse que les opérations en réseau. En outre, nous utilisons $.inArray() au lieu de .indexOf() donc cela fonctionne correctement dans IE.

---

Si vous voulez un moins efficace mais plus courte solution (juste pour illustration, utiliser la première méthode!):

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

You can test it here, cela supprime tous les frères et sœurs avec la même valeur, mais il est beaucoup plus cher que la première méthode (DOM Traversal est cher, et plusieurs appels de moteur de sélection ici, beaucoup plus). Nous utilisons .prevAll() parce que vous ne pouvez pas simplement supprimer .siblings() à l'intérieur d'un .each(), cela causera quelques erreurs avec la boucle car elle attendait le prochain enfant.

Answer 2

La meilleure façon qui est venu dans mon esprit utilisait les frères et sœurs

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

var $option = $(this); 

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


}) 

Answer 3

Du haut de ma tête, non testés:

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

Answer 4

essayez d'utiliser le code ci-dessous pour supprimer des options en double:

$("#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>