Removing duplicate entries from the selection window

Question

How do I use jQuery to remove duplicates

<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

You can do it as follows:

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

Try it here , this is a simple approach, we just save an array of the values ​​found, if we did not find the value, add it to the array ( .push() ), if we found this value, this is the hype we found earlier, .remove() it.

Only a <select> traversal is performed once, which minimizes the DOM traversal, which is much more expensive than array operations. We also use $.inArray() instead of .indexOf() , so this works correctly in IE.

---

If you need a less efficient but shorter solution (just use the first method to illustrate!):

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

You can test it here , it will remove all siblings with the same value, but it is much more expensive than the first method (DOM Traversal expensive and multiple calls to selector engines here, many more). We use .prevAll() because you cannot just remove .siblings() inside .each() , this will cause some errors in the loop, since it is expecting the next child.

Answer 2

The easiest way that crossed my mind is to use siblings

 $("select>option").each( function(){ var $option = $(this); $option.siblings() .filter( function(){ return $(this).val() == $option.val() } ) .remove() }) 

Answer 3

Above, untested:

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

Answer 4

Try using the code below to remove duplicate options:

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