javascript - 使用javascript从下拉列表中删除重复元素

Question

这是下拉列表框。我想使用 javascript 删除重复的“Apple”。

<select id="Fruits">
<option value="Apple" >Apple</option>
<option value="Orange">Orange</option>
<option value="Mango">Mango</option>
<option value="Apple" >Apple</option>
</select>

Answer 1

这是@DanDavis 的回答以供引用，我将其添加为公共(public)服务。加上一些格式和几个替代方案来涵盖类似的用例。

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

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

如果您正在使用由数据库填充的选择(一个非常明显的用例)并且值为 ids 并且 innerText 是您要删除的重复项.那么你会想要:

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

此外，如果你想保留所选的选项(它可能不是第一次匹配。)试试这个:

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