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()），如果我们< em>已经找到了这个值，这是我们之前发现的一个骗局，.remove()它。

这只会抓取<select>一次，最大限度地减少DOM遍历，这是 lot 比数组操作更昂贵。我们还使用$.inArray()代替.indexOf()，因此这在IE中正常运行。

如果您想要效率较低但更短的解决方案（仅用于说明，请使用第一种方法！）：

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

You can test it here，这会删除具有相同值的所有兄弟姐妹，但它比第一种方法贵得多（DOM Traversal很昂贵，而且这里有多个选择器引擎调用，还有更多）。我们正在使用.prevAll()，因为您无法在.siblings()内删除.each()，因为它预期下一个孩子会导致循环出错。

Answer 2

我想到的最简单的方法是使用兄弟姐妹

$("select>option").each( function(){

 var $option = $(this);  

 $option.siblings()
       .filter( function(){ return $(this).val() == $option.val() } )
       .remove()


})

Answer 3

从我的头顶，未经测试：

$('#mySelect option').each(function(){
  if ($('#mySelect option[value="'+$(this).val()+'"]').length) $(this).remove();
});

Answer 4

尝试使用以下代码删除重复选项：

$("#color option").val(function(idx, val) {
  $(this).siblings("[value='"+ val +"']").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class ="select-form" name="color" id="color">
  <option value="">Select Color</option>
  <option value="1">Color 1</option>
  <option value="2">Color 2</option>
  <option value="3">Color 3</option>
  <option value="3">Color 3</option> <!-- will be removed since value is duplicate -->
  <option value="2">Color 2</option> <!-- will be removed since value is duplicate -->
</select>

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

4 个答案: