从下拉列表中删除多个重复的选项 [英] Remove Multiple Duplicate Options From Drop-down List

问题描述

与此问题类似此处我想了解如何从下拉列表中删除重复的选项，但是我想映射一个ID列表来搜索，并查看它们是否有重复的选项来拼接出来，而不仅仅是一个输入选择器。 / p>

举例如下：

 < select ID = MeatList > 
< option value =OBgYN7> Ham< / option> 
< option value =ELmn5>牛肉< / option> 
< option value =KrUKt6>鸡< / option> 
< option value =OBgYN7selected =selected> Ham< / option> 
< / select> 
 
< select id =Seats> 
< option value =2>两个表格< / option> 
< option value =3>三个表格< / option> 
< / option><选项值=5> 
< option value =10>派对表< / option> 
< / select> 
 
< select id =Lastname> 
< option value =Tao>陶的< / option> 
< option value =Smith> Smith's< / option> 
< option value =Samuels> The Samuels'< / option> 
< option value =Smith> Smith's< / option> 
< / select> 
  

正如您所看到的，输入MeatList和Lastname具有重复值，我希望能够搜索所有下拉框的重复值（或内部文本）并拼接出来。这可以通过某种映射来实现吗？

要使用的代码是：

  []。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; 
} 
}，{}）; 
  

解决方案

不知道你认为在 handleLists 部分脚本。在找到与ID相对应的元素后，您只需要将其他段封装在迭代器中（ forEach ）。

<$ p> var idList = [MeatList，Seats，Lastname]。map（function（id）{return document.getElementById（id）}）;

idList.forEach（function（select）{
[] .slice.call（select.options）
.map（function（a）{
if（这[a.value]）{
select.removeChild（a）;
} else {
this [a.value] = 1;
}
}， {}）;
}）;


当然，这很糟糕。你应该重复删除它自己的函数，例如：

 函数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]。 
 idList.forEach（function（select）{deDuplicate（select）;}）; 
  

就个人而言，我建议您学习/使用CoffeeScript，因为它 Javascript很棒，de-dupe看起来像这样：

  deDuplicate =（select） - > 
 [] .slice.call（select.options）.map（a） - > 
 if @ [a.value] 
 select.removeChild a 
 else 
 @ [a.value] = 1 
，{} 
  

然后包裹你可以这样做：

  deDuplicate在[MeatList，Seats，Lastname]中选择select。map（id） - > 
 document.getElementById id 
  

这更清楚地表达为英语，至少对我而言。一如既往YMMV。

Similar to this question here I'd like to find out how to remove duplicate options from drop down lists, however I'd like to map a list of ID's to search from and see if they have duplicate options to splice out as opposed to just one input selector.

An example of this would be as follows:

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

As you can see, the inputs MeatList and Lastname have duplicate values, I want to be able to search all drop down boxes for duplicate values (or inner text) and splice them out. Would that be possible through mapping of some sort?

The code to be used would be:

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

And to get an idea of what I mean by mapping the drop-down lists, I would use a code like this:

 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; 
        } 
      },{}); 

解决方案

Not sure what you thought was going on in the handleLists part of your script. You just need to wrap the other segment in an iterator (forEach) after finding the elements corresponding to the IDs.

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; 
    }
  },{});
});  

Of course, this is bad. You should make de-duplicating a function of it's own, eg.:

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

and then:

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

Personally I recommend learning/using CoffeeScript as it uncrufts Javascript a great deal, the de-dupe looks like this:

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

and then wrapped you can do:

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

Which reads more plainly as english, at least to me it does. As always YMMV.

这篇关于从下拉列表中删除多个重复的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！