从选择框中删除重复的条目

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

这里试试看,这是一个简单的方法,我们只是保持找到值的数组,如果我们还没有发现的价值,将其添加到阵列(.push()),如果我们已经找到了价值,这一块是一个傻瓜我们之前发现,.remove()它.

这只能爬<select>一次,最大限度地减少DOM遍历这是很多比数组操作更加昂贵.我们也使用$.inArray()而不是.indexOf()这样在IE中正常工作.

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

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

你可以在这里测试它,这会删除具有相同值的所有兄弟姐妹,但它比第一种方法贵得多(DOM Traversal很昂贵,而且这里有多个选择器引擎调用,还有更多).我们正在使用.prevAll()因为你不能只是删除.siblings()内部.each(),它会导致循环中的一些错误,因为它期望下一个孩子.