Remove duplicate elements from a drop down list using javascript

Question

This is the dropdown list box. I want to remove the duplicate "Apple" using javascript.

<select id="Fruits">
<option value="Apple" >Apple</option>
<option value="Orange">Orange</option>
<option value="Mango">Mango</option>
<option value="Apple" >Apple</option>
</select>

[].slice.call(Fruits.options).map(function(a){if(this[a.value]){ Fruits.removeChild(a); }else{this[a.value]=1;} },{}) — dandavis
– dandavis, Commented Jul 17, 2013 at 19:00
@dandavis is that plain JavaScript or using a JavaScript library? — Luiggi Mendoza
– Luiggi Mendoza, Commented Jul 17, 2013 at 19:41

ocodo · Accepted Answer · 2013-11-17 02:30:33Z

3

This is @DanDavis answer for reference, I'm adding it as, you know, public service. Plus a bit of formatting and a couple of alternatives to cover similar use cases.

var fruits = document.getElementById("Fruits");

[].slice.call(fruits.options)
  .map(function(a){
    if(this[a.value]){ 
      fruits.removeChild(a); 
    } else { 
      this[a.value]=1; 
    } 
  },{});

If you are working with a select populated by a database (a pretty obvious use case) and the values are ids and the innerText is the duplicates you want to remove. Then instead you'd want:

[].slice.call(fruits.options)
  .map(function(a){
    if(this[a.innerText]){ 
      fruits.removeChild(a); 
    } else { 
      this[a.innerText]=1; 
    } 
  },{});

Furthermore, if you want to retain the selected option (it might not be the first occurrence matched.) Try this:

[].slice.call(fruits.options)
  .map(function(a){
    if(this[a.innerText]){ 
      if(!a.selected) fruits.removeChild(a); 
    } else { 
      this[a.innerText]=1; 
    } 
  },{});

edited Nov 17, 2013 at 2:30

answered Nov 17, 2013 at 2:07

ocodo

30.5k19 gold badges111 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brad Over a year ago

I know this is old however, I wanted to know if there was a way to map ID's and check for each of them?

ocodo Over a year ago

@Especially if you post this as a question, I will answer it. (You may find a similar question already exists.) Seems like you just need an array of the ID's as strings and the map those, and return the element found, or null. You could optionally compact the array (with lo-dash/underscore etc.) - if you post a question, link it here.

Brad Over a year ago

I've posted the question here: stackoverflow.com/questions/25562969/… I tried mocking up something but I'm terrible at javascript. Thank you!

Xotic750 · Accepted Answer · 2013-07-17 20:10:15Z

In ES3 POJS you could do this.

Javascript

function removeDuplicateOptions(selectNode) {
    if (typeof selectNode === "string") {
        selectNode = document.getElementById(selectNode);
    }

    var seen = {},
        options = [].slice.call(selectNode.options),
        length = options.length,
        previous,
        option,
        value,
        text,
        i;

    for (i = 0; i < length; i += 1) {
        option = options[i];
        value = option.value,
        text = option.firstChild.nodeValue;
        previous = seen[value];
        if (typeof previous === "string" && text === previous) {
            selectNode.removeChild(option);
        } else {
            seen[value] = text;
        }
    }
}

removeDuplicateOptions("Fruits");

On jsfiddle

Collectives™ on Stack Overflow

Remove duplicate elements from a drop down list using javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related