jQuery 如何删除具有相同值的重复下拉选项元素

How to Remove duplicate dropdown option elements with same value

提问by Sush

How can I remove duplicate values -> drop down option elements?
I have the following HTML:

如何删除重复值 -> 下拉选项元素？
我有以下 HTML：

<option value="">All Servers</option>
<option value="com">http://smiles.com</option>
<option value="in">http://3smiles.com</option>
<option value="com">http://desk.com</option>
<option value="in">http://france24.com</option>

from the above I have to remove repeated values comand in, so my expected output should be like:

从上面我必须删除重复的值comand in，所以我的预期输出应该是：

<option value="">All Servers</option>
<option value="com">http://smiles.com</option>
<option value="in">http://3smiles.com</option>

How to do it using jQuery?

如何使用 jQuery 做到这一点？

回答by Roko C. Buljan

Using .siblings()(to target sibling optionelements), and Attribute Equals Selector [attr=""]

使用.siblings()（针对同级option元素）和属性等于选择器[attr=""]

$(".select 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">
  <option value="">All</option>
  <option value="com">.com 1</option>
  <option value="net">.net 1</option>
  <option value="com">.com 2</option> <!-- will be removed since value is duplicate -->
  <option value="net">.net 2</option> <!-- will be removed since value is duplicate -->
</select>

(works also for multiple .selecton the same page)
^{I added a class .selectto the <select>element to be more selector-specific}

（也适用.select于同一页面上的多个）
^{我向元素添加了一个类.select以<select>更加特定于选择器}

How it works:
while options are accessed one by one (by .val()) - lookup for .sibling()options that have the same "[value='"+ this.value +"']"and .remove()them.

它是如何工作的：
虽然options 被一个一个（by .val()）访问- 查找.sibling()option具有相同"[value='"+ this.value +"']"和.remove()它们的s 。

回答by Arun P Johny

The correct solution will be is to not to allow the server to have duplicate values....

正确的解决方案是不允许服务器具有重复值....

try

尝试

var map = {};
$('select option').each(function () {
    if (map[this.value]) {
        $(this).remove()
    }
    map[this.value] = true;
})

Demo: Fiddle

演示：小提琴

回答by aelor

use this :

用这个 ：

$(document).ready(function () {
    var usedNames = {};
    $("select > option").each(function () {
        if (usedNames[this.value]) {
            $(this).remove();
        } else {
            usedNames[this.value] = this.text;
        }
    });
});

demo here : http://jsfiddle.net/aelor/aspMT/

演示在这里：http: //jsfiddle.net/aelor/aspMT/

回答by Chankey Pathak

HTML

HTML

<select class="something">
<option value="">All Servers</option>
<option value="com">http://smiles.com</option>
<option value="in">http://3smiles.com</option>
<option value="com">http://desk.com</option>
<option value="in">http://france24.com</option>
</select>

jQuery

jQuery

var seen = {};
jQuery('.something').children().each(function() {
    var txt = jQuery(this).attr('value');
    if (seen[txt]) {
        jQuery(this).remove();
    } else {
        seen[txt] = true;
    }
});

Demo

Demo

回答by naota

How about this.

这个怎么样。

DEMO :http://jsfiddle.net/naokiota/yayTm/2/

演示：http: //jsfiddle.net/naokiota/yayTm/2/

var exist = {};
$('select > option').each(function() {
    if (exist[$(this).val()]){
        $(this).remove();
    }else{
        exist[$(this).val()] = true;
    }
});

Hope this helps.

希望这可以帮助。

回答by naota

Not tested, but something like this should work

未经测试，但这样的事情应该工作

var values = new Array();
$('#YourSelect').children('option').each(function() {
  var text = $(this).text();
  if (values.indexOf(text) === -1) {
    values.push(text);
  } else {
    //  Its a duplicate
    $(this).remove()
  }
}

回答by JCM

# This is other quick option iterating options, counting the duplicates and remove when are more than one#

# 这是其他快速选项迭代选项，计算重复项并在超过一个时删除#

var opt = $("select[title='Country'] option");              
$.each(opt, function (key, value) {                 
  var len = $("select[title='Country'] option:contains(" + value.text + ")").length;
  if (len > 1)                   
     {
     value.remove();
     }   
  });  

回答by Juan J

You can use the following code to remove options with duplicate values.

您可以使用以下代码删除具有重复值的选项。

    $(document).ready( function(){
        var a = new Array();
        $("#selectID").children("option").each(function(x){
            test = false;
            b = a[x] = $(this).val();
            for (i=0;i<a.length-1;i++){
                if (b ==a[i]) test =true;
            }
            if (test) $(this).remove();
        })
    });