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的答案供参考，我将其添加为公共服务。加上一些格式化和几个替代方案来涵盖类似的用例。

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

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

如果您正在使用由数据库填充的select（一个非常明显的用例），并且值为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; 
    } 
  },{});

Answer 2

在ES3 POJS中你可以这样做。

的Javascript

function removeDuplicateOptions(selectNode) {
    if (typeof selectNode === "string") {
        selectNode = document.getElementById(selectNode);
    }

    var seen = {},
        options = [].slice.call(selectNode.options),
        length = options.length,
        previous,
        option,
        value,
        text,
        i;

    for (i = 0; i < length; i += 1) {
        option = options[i];
        value = option.value,
        text = option.firstChild.nodeValue;
        previous = seen[value];
        if (typeof previous === "string" && text === previous) {
            selectNode.removeChild(option);
        } else {
            seen[value] = text;
        }
    }
}

removeDuplicateOptions("Fruits");

在 jsfiddle

上

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

2 个答案: