从选择框

我将如何，使用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>

来源

2010-07-12 foradream

你可以这样说：

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遍历，这是一个lot比数组操作更昂贵。此外，我们正在使用$.inArray()，而不是.indexOf()所以这在IE中正常工作。

如果你想有一个效率较低，但更短的解决方案（仅仅是一个例子，使用第一种方法！）：

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

You can test it here，这消除了与相同值的所有兄弟姐妹，但它更比第一种方法昂贵（DOM Traversal是昂贵的，并且多个选择器引擎在这里调用，更多）。我们使用的是.prevAll()，因为您不能在.each()中删除.siblings()，因为它会预计下一个孩子，所以会在循环中导致一些错误。

来源

2010-07-12 10:54:34

评论帮助像我这样的新秀。如果您使用jQuery noconflict，请确保将所有$替换为您选择的任何内容。将为您节省大量的时间调试。 :) - http://api.jquery.com/jquery.noconflict/ – 2014-08-13 23:26:53

@JoshuaDance你也可以将所有这些放在一个函数中，其中'$'是jQuery里面简化的东西，就像这样：'（function（$） {... code ...}）（jQuery）;'（或其他不是'jQuery'的东西）。这意味着无论你选择哪一个地方，都不要修改你想要使用的任何代码或插件。 – 2014-08-14 13:33:10

此方法将停止页面上** ALL **选择中的重复项。例如，如果您有多个yes/no选择，则只有第一个选项会有选项。复制你的小提琴中的选择和测试。所以没有选项会多次出现在页面上。 h（ – 2016-12-17 03:34:16

是我脑子里浮现的最简单方法是使用兄弟姐妹

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

var $option = $(this); 

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


})

来源

2010-07-12 10:55:27 jantimon

从我的头顶，未经测试：

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

来源

2010-07-12 10:55:48

它是一个好方法，但在你的问题中添加“...长度> 1” – 2014-10-19 16:25:50

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

$("#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>

来源

2017-08-02 04:14:23

回答

相关问题