從下拉列表中刪除多個重複的選項

Question

與此問題類似here我想了解如何從下拉列表中刪除重複的選項，但是我想映射一個ID列表以搜索並查看如果他們有重複的選項拼接出來，而不是隻有一個輸入選擇器。

這方面的一個例子是如下：

<select id="MeatList"> 
<option value="OBgYN7" >Ham</option> 
<option value="ELmn5">Beef</option> 
<option value="KrUKt6">Chicken</option> 
<option value="OBgYN7" selected="selected">Ham</option> 
</select> 

<select id="Seats"> 
<option value="2" >Table For Two</option> 
<option value="3">Table For Three</option> 
<option value="5">Table for Five</option> 
<option value="10" >Party Table</option> 
</select> 

<select id="Lastname"> 
<option value="Tao" >The Tao's</option> 
<option value="Smith">The Smith's</option> 
<option value="Samuels">The Samuels'</option> 
<option value="Smith" >The Smith's</option> 
</select> 

正如你所看到的，MeatList和姓氏有重複值的投入，我希望能夠搜索所有下拉重複值框（或內部文本）並將它們拼接在一起。這是可能的通過某種映射？

的代碼中使用將是：

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

而且得到我的意思通過映射下拉列表的想法，我會用這樣的代碼：

var idlist= ["MeatList", "Seats", "Lastname"]; 
    var handlelists = idlist.join("|"); 
    [].slice.call(handlelists.options) 
     .map(function(a){ 
     if(this.search([a.innerText])){ 
      if(!a.selected) handlelists.removeChild(a); 
     } else { 
      this[a.innerText]=1; 
     } 
     },{}); 

Answer 1

不知道你以爲你在腳本的handleLists部分發生了什麼。在找到與這些ID相對應的元素之後，您只需要將其他段包裝在迭代器中（forEach）。

var idList= ["MeatList", "Seats", "Lastname"].map(function(id){return document.getElementById(id)}); 

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

當然，這是不好的。你應該去複製它自己的功能，例如：

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

然後：

var idList= ["MeatList", "Seats", "Lastname"].map(function(id){return document.getElementById(id)});  
idList.forEach(function(select){ deDuplicate(select); }); 

我個人建議學習/使用CoffeeScript的，因爲它uncrufts的Javascript很大的重複數據刪除是這樣的：

deDuplicate = (select)-> 
    [].slice.call(select.options).map (a)-> 
    if @[a.value] 
     select.removeChild a 
    else 
     @[a.value] = 1 
    , {} 

再包，你可以這樣做：

deDuplicate select for select in ["MeatList", "Seats", "Lastname"].map (id)-> 
    document.getElementById id 

這更清楚地表達爲英語，至少對我來說它確實如此。一如既往YMMV。