jquery - 如何删除下拉列表中的重复项，jquery

Question

我试图从下拉列表中删除重复项，我正在处理的数据已损坏，因此我需要在前端的下拉列表中将其删除。

$(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>

我不知道如何使 RemovingFunction 工作，请帮助，我需要将此功能设为全局才能在我的其他下拉列表中工作

标签： jqueryuniquedropdown

Answer 1

您可以使用对象的键是唯一的这一事实来删除任何重复项。

//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>