Dynamically add array elements to select options without duplicates

Question

I have this drop-down menu. My goal is to transfer the elements of an array as choices on the drop-down menu. However, I want repeating array elements to be copied to the drop-down only once. I'm looking for transferring my array to another array without repetition. So, I can rather use that new array to transfer its element to the drop-down menu. For example, on the drop-down menu, the "kg" and "lbs" would only exist once instead of twice.

amountType = document.getElementById("amount-type");

arr = ["kg", "medium", "lbs", "liter", "kg", "small", "lbs"];

for (let i = 0; i < arr.length; i++) {
  let el = document.createElement("option");
  el.textContent = arr[i];
  el.value = arr[i];
  
  amountType.appendChild(el);
}

<select id="amount-type"></select>

Does this answer your question? Get all unique values in a JavaScript array (remove duplicates) — dale landry
– dale landry, Commented May 23, 2021 at 5:11

Mamun · Accepted Answer · 2021-05-23 03:49:34Z

2

First you can find the unique elements from the array using Set:

var amountType = document.getElementById("amount-type");

var arr = ["kg", "medium", "lbs", "liter", "kg", "small", "lbs"];
arr = [...new Set(arr)]; //get the unique elements
for (let i = 0; i < arr.length; i++) {
  let el = document.createElement("option");
  el.textContent = arr[i];
  el.value = arr[i];
  
  amountType.appendChild(el);
}

<select id="amount-type"></select>

edited May 23, 2021 at 3:49

answered May 23, 2021 at 3:41

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

Comments

Spectric · Accepted Answer · 2021-05-23 04:23:43Z

1

Try selecting the option with the current value. If an option exists with that value, the length of the array returned from querySelectorAll will be greater or equal to 1.

amountType = document.getElementById("amount-type");

arr = ["kg", "medium", "lbs", "liter", "kg", "small", "lbs"];
for (let i = 0; i < arr.length; i++) {
  if (amountType.querySelectorAll('option[value="' + arr[i] + "\"]").length == 0) {
    let el = document.createElement("option");
    el.textContent = arr[i];
    el.value = arr[i];
    amountType.appendChild(el);
  }
}

<select id="amount-type"></select>

answered May 23, 2021 at 4:23

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

Collectives™ on Stack Overflow

Dynamically add array elements to select options without duplicates

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related