2

这是下拉列表框。我想使用 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>
4

2 回答 2

3

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

如果您正在使用由数据库填充的选择（一个非常明显的用例）并且值是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; 
    } 
  },{});
于 2013-11-17T02:07:29.487 回答
1

在 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

于 2013-07-17T20:10:15.537 回答