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

Question

如何删除重复值 - >下拉选项元素？
我有以下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>

从上面我不得不删除重复值com和in,所以我预期的输出应该是这样的:

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

如何使用jQuery做到这一点？

Answer 1

使用.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>

(也适用.select于同一页面上的多个)
^{我.select在<select>元素中添加了一个类,使其更具选择性}

工作原理:
当optionS被一个(由访问一个.val()) -用于查找.sibling() optionS作同样"[value='"+ this.value +"']"和.remove()他们.

Answer 2

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

尝试

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

演示:小提琴

Answer 3

用这个 :

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

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