javascript - 从选择框中删除重复条目

Question

我如何使用 jQuery 删除重复项

        <option value="English">English</option>
        <option value="English">English</option>
        <option value="English">English</option>
        <option value="Geology">Geology</option>
        <option value="Geology">Geology</option>
        <option value="Information Technology">Information Technology</option>
        <option value="Music">Music</option>
        <option value="Music">Music</option>
        <option value="Zoology">Zoology</option>

Answer 1

你可以这样做:

var found = [];
$("select option").each(function() {
  if($.inArray(this.value, found) != -1) $(this).remove();
  found.push(this.value);
});

Give it a try here ，这是一个简单的方法，我们只是保留一个找到的值的数组，如果我们没有找到该值，将它添加到数组 ( .push() )，如果我们已经找到了该值，这是我们之前发现的骗局， .remove()

这只会抓取 <select>一次，最大限度地减少 DOM 遍历，这比数组操作要很多。我们也在使用 $.inArray() 而不是 .indexOf()所以这在 IE 中正常工作。

---

如果您想要一个效率较低但更短的解决方案(仅用于说明，请使用第一种方法!):

$('select option').each(function() {
  $(this).prevAll('option[value="' + this.value + '"]').remove();
});

You can test it here ，这会移除所有具有相同值的兄弟，但它比第一种方法要昂贵得多(DOM Traversal 很昂贵，这里调用多个选择器引擎，还有更多)。我们正在使用 .prevAll() 因为你不能只删除 .siblings() 在 .each() 里面，它会导致循环出现一些错误，因为它期待下一个 child 。