Remove Duplicates from Dropdown List By javascript only

Question

I have a select dropdown field that is being created dynamically from a database . Due to the way this is being created it results in the dropdown having duplicate items and values.

<select id="locationList">
<option value="1">Andover</option>
<option value="2">Bishops waltham</option>
<option value="1">Andover</option>
<option value="3">Boscombe</option>
<option value="4">Bournemouth</option>
<option value="2">Bishops waltham</option>
<option value="4">Bournemouth</option>

</select>

Does anyone know if there is a way to use some code on the page which checks the dropdown for duplicates and removes duplicates from the menu only by Javascript No Jquery?

Thanks in advance,

Abhinav

How are you creating that list? – Roberto Zvjerković Sep 07 '18 at 07:17 — Roberto Zvjerković, Sep 07 '18 at 07:17
Why don't you get get items uniquely from database? – Mojtaba Ahmadi Sep 07 '18 at 07:22 — Mojtaba Ahmadi, Sep 07 '18 at 07:22

score 1 · Accepted Answer · answered Sep 07 '18 at 07:17

Javascript has removeChild option, you can use it to remove duplicate value:

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

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

<select id="locationList">
<option value="1">Andover</option>
<option value="2">Bishops waltham</option>
<option value="1">Andover</option>
<option value="3">Boscombe</option>
<option value="4">Bournemouth</option>
<option value="2">Bishops waltham</option>
<option value="4">Bournemouth</option>
</select>

https://stackoverflow.com/questions/17708014/remove-duplicate-elements-from-a-drop-down-list-using-javascript — manikant gautam, Sep 07 '18 at 07:26

Koshux · Answer 2 · 2018-09-07T07:36:52.090

0

Another option is to use the set as suggested here: alternatives or another alternative.

[ ...new Set([ ...<arg1>, ...<arg2> ]) ] for e.g.

var y = [ ...new Set([ ...[1, 2, 3, 4, 5], ...[3, 4, 5] ]) ]

// expected output: [ 1, 2, 3, 4, 5 ]

Use the output to bind to the dropdown list.

edited Sep 07 '18 at 07:36

answered Sep 07 '18 at 07:30

Koshux

346
1
2
10

score 0 · Answer 3 · answered May 17 '20 at 05:57

Do it with dual for loop using pure js

Simple and easy way with select remove method

function clearList() {
  var x = document.getElementById("locationList");
  //count the lenth of select optons
  var listLength = x.length;
  for (var i = 0; i < listLength; i++) {
    for (var j = 0; j < listLength; j++) {
      //i != j This prevents the actual index from being deleted
      //x.options[i].value == x.options[j].value => it finds the duplicate index.
      if (x.options[i].value == x.options[j].value && i != j) {
        //Remove duplicate option element
        x.remove(j);
        //Refresh the list Length
        listLength--;
      }
    }
  }
}

<select id="locationList">
  <option value="1">Andover</option>
  <option value="2">Bishops waltham</option>
  <option value="1">Andover</option>
  <option value="3">Boscombe</option>
  <option value="4">Bournemouth</option>
  <option value="2">Bishops waltham</option>
  <option value="4">Bournemouth</option>
</select>

<p>Click to remove duplicates</p>
<button onclick="clearList()">Remove</button>

Remove Duplicates from Dropdown List By javascript only

3 Answers3