'How to remove duplicate values coming from option tag

I have an Select tag with multiple options.On button click every selected option creates an li with innerText set to text value of the option. How would i make a function that i cant add the same element twice?

 $(".btn").on("click", function () {
          let selectedItems = $("#node-input-options option:selected");
          selectedItems.each(function (i, el) {
            // console.log(el, i);
            let text = $(el).text();
            let val = $(el).val();
            var li = $("<li>").text(text).val(val).attr("title", val);
            list.append(li);
            li.on("dblclick", function () {
              li.remove();
            });
          });

This is my code in jquery. This is and example on fiddle => https://jsfiddle.net/nah062ck/11/

javascript jquery

Solution 1:^[1]

> You can use Jquery contains selector to check if a selected item already exists in the list.

    $("#b1").on("click", function() {
            var selectedItems = $("#cars option:selected");
            let list = $(".list");
            selectedItems.each(function(i,el) {
              var text = $(el).text();
              var val = $(el).val();
              var li = $("<li>").text(text).val(val).attr('title', val).attr("size",10);
              li.size = 10;
               var exists=$('.list li:contains('+text+')');
               if(exists.length > 0){
               alert('The Selected Word already exists');
                   return
               }
               list.append(li);
             
            });
          });

Solution 2:^[2]

$("#b1").on("click", function() {
  var selectedItems = $("#cars option:selected");
  let list = $(".list");
  selectedItems.each(function(i, el) {
    var text = $(el).text();
    var val = $(el).val();
    var li = $("<li>").text(text).val(val).attr('title', val).attr("size", 10);
    li.size = 10

    let c = 0
    if ($(".list li").length === 0) {
      list.append(li)
      // if list is empty fill it
    } else {
      $(".list li").each(function(i, el2) {
        $(el2).text() == text ? c = "x" : null
        // if not empty, check if text exists in list under each li
      })
    }
    c === 0 ? list.append(li) : console.log(false)
    // do according 


  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select size="7" name="cars" id="cars" multiple>
  <option value="cup">Cupcake</option>
  <option value="cupas">Cunut</option>
  <option value="cup124">Eclair</option>
  <option value="cup2512">Froyo</option>
  <option>Gingerbread</option>

</select>
<button id="b1">Click me</button>
<ul class="list"></ul>

Solution 3:^[3]

After you append to list you can disable and unselect using .prop({'disabled': true, selected:false})

Then in your remove process look for that same option and enable it again.

$("#b1").on("click", function() {
  var selectedItems = $("#cars option:selected");
  let list = $(".list");
  selectedItems.each(function(i, el) {
    var text = $(el).text();
    var val = $(el).val();
    var li = $("<li>").text(text).attr('title', val);
    list.append(li);
  }).prop({disabled: true, selected: false});
});


$('.list').on('dblclick', 'li', function() {
  const $li = $(this),
    title = $li.attr('title');
  $("#cars option[value='" + title + "']").prop('disabled', false)
  $li.remove()

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select size="7" name="cars" id="cars" multiple>
  <option value="cup">Cupcake</option>
  <option value="cupas">Cunut</option>
  <option value="cup124">Eclair</option>
  <option value="cup2512">Froyo</option>
  <option>Gingerbread</option>

</select>
<button id="b1">Click me</button>
<ul class="list"></ul>

Solution 4:^[4]

let addEl = document.getElementById("add-country");
let containerList = document.getElementById("country-list");
let countries = [];
addEl.onclick = function(e) {
  e.preventDefault();
  let selectEl = document.getElementById("country").value;
  if (!(countries.includes(selectEl))) {
    countries.push(selectEl);
    let createElLi = document.createElement("LI");
    createElLi.innerHTML = selectEl;
    containerList.appendChild(createElLi);
  }
}

<form method="get" accept-charset="utf-8">
  <select name="country" id="country">
    <option>Japan</option>
    <option>USA</option>
    <option>India</option>
    <option>Bangladesh</option>
    <option>Canada</option>
    <option>Pakistan</option>
  </select>
  <input type="submit" value="Add" id="add-country">
</form>
<ul id="country-list"></ul>

Solution 5:^[5]

Code :

<html>
  <head>
    <title>Remove Duplicate Options</title>
  </head>
  <body>
    <select id='mylist'>
<option value='php'>PHP</option>
<option value='css'>CSS</option>
<option value='php'>PHP</option>
<option value='sql'>SQL</option>
<option value='js'>JS</option>
<option value='css'>CSS</option>
<option value='js'>JS</option>
</select>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script>
function removeduplicate()
{
var mycode = {};
$("select[id='mylist'] > option").each(function () {
    if(mycode[this.text]) {
        $(this).remove();
    } else {
        mycode[this.text] = this.value;
    }
});
}
</script>
    <button onClick='removeduplicate()'>Remove Duplicate</button>
  </body>
</html

Reference : Narendra Dwivedi - Remove Duplicate DropDown Option

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Muhammad Shaeel
Solution 2
Solution 3
Solution 4	ikiK
Solution 5	Markrum

'How to remove duplicate values coming from option tag

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]