How would I, using jQuery, remove the 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>

How would I, using jQuery, remove the 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>

• javascript
• jquery
• html

4 Answers 4

You can do it like this:

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

Give it a try here, it's a simple approach, we're just keeping an array of found values, if we haven't found the value, add it to the array (.push()), if we have found the value, this one's a dupe we found earlier, .remove() it.

This only crawls the <select> once, minimizing DOM traversal which is a lot more expensive than array operations. Also we're using $.inArray() instead of .indexOf() so this works properly in IE.

If you want a less efficient but shorter solution (just for illustration, use the first method!):

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

You can test it here, this removes all siblings with the same value, but it's much more expensive than the first method (DOM Traversal is expensive, and multiple selector engine calls here, many more). We're using .prevAll() because you can't just remove .siblings() inside an .each(), it'll cause some errors with the loop since it expected the next child. ​

The easiest way that came into my mind was using siblings

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

 var $option = $(this);  

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


})

From top of my head, untested:

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

Try use below code 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>