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ć
– Roberto Zvjerković

2018-09-07 07:17:21 +00:00
Commented Sep 7, 2018 at 7:17 — Roberto Zvjerković
– Roberto Zvjerković, Commented Sep 7, 2018 at 7:17
Why don't you get get items uniquely from database?

Mojtaba Ahmadi
– Mojtaba Ahmadi

2018-09-07 07:22:09 +00:00
Commented Sep 7, 2018 at 7:22 — Mojtaba Ahmadi
– Mojtaba Ahmadi, Commented Sep 7, 2018 at 7:22

saAction · Accepted Answer · 2018-09-07 07:17:55Z

1

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>

answered Sep 7, 2018 at 7:17

saAction

2,0751 gold badge15 silver badges20 bronze badges

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

1 Comment

Manikant Gautam Over a year ago

stackoverflow.com/questions/17708014/…

Koshux · Accepted Answer · 2018-09-07 07:36:52Z

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 7, 2018 at 7:36

answered Sep 7, 2018 at 7:30

Koshux

3461 gold badge2 silver badges10 bronze badges

Comments

Lakhvir Singh · Accepted Answer · 2020-05-17 05:57:24Z

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>

Collectives™ on Stack Overflow

Remove Duplicates from Dropdown List By javascript only

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related