How to remove duplicates in dropdown, jquery

Question

I've tried to remove duplicates from my dropdown, data I'm working on is corrupted so I need to remove it on dropdowns on my frontend.

$(document).ready(function () {
   var usedNames = {};
   $("#myDropdown").each(RemovingFunction(usedNames));
});


function RemovingFunction (usedNamesObject){
  if (usedNamesObject[this.value]) {
    $(this).remove();
  } else {
    usedNamesObject[this.value] = this.text;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myDropdown">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="mercedes">Mercedes</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
  <option value="audi">Audi</option>
  <option value="audi">Audi</option>
</select>

I don't know how to make RemovingFunction work, please help, I need to make this function global to work on my other dropdowns

I suggest to observe [this](https://stackoverflow.com/a/2822974/3887114) first, there is exactly what you need. — Irakli, Dec 25 '18 at 20:29
You are immediadely invoking `RemovingFunction` the way you pass it to `each` — charlietfl, Dec 25 '18 at 22:45
Possible duplicate of [JQuery: Remove duplicate elements?](https://stackoverflow.com/questions/2822962/jquery-remove-duplicate-elements) — Heretic Monkey, Dec 26 '18 at 01:17

score -1 · Answer 1 · answered Dec 25 '18 at 22:43

You can use the fact that the keys of an object are unique to remove any duplicates.

//for an object objOpt you can iterate  all the elements like so:  
objOpt[ elementHTML ] = domElement
//of you have 10 similar element, in the end only one makes it to the object

$(function() {
    var select = $('#myDropdown');
    var objOpt = {};
    select.find('option').each(function() {
        objOpt[this.outerHTML] = this;
    });
    select.empty();
    for(key in objOpt) {
        select.append( objOpt[key] );
    };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myDropdown">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
           <option value="mercedes">Mercedes</option>
            <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="audi">Audi</option>
          <option value="audi">Audi</option>
       </select>

How to remove duplicates in dropdown, jquery

1 Answers1