如何删除具有相同值的重复下拉选项元素 [英] How to Remove duplicate dropdown option elements with same value

问题描述

如何删除重复值->下拉选项元素?
我有以下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做到这一点?

解决方案

使用 .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，以使其更加针对选择器}

工作方式:
而option被一个(c11>)单个访问-查找具有相同"[value='"+ this.value +"']"和"[value='"+ this.value +"']"option s的.sibling() option /"rel =" noreferrer> .remove() 他们.

How can I remove duplicate values -> drop down option elements?
I have the following 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 com and in, so my expected output should be like:

<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?

解决方案

Using .siblings() (to target sibling option elements), and Attribute Equals Selector [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 .select on the same page)
^{I added a class .select to the <select> element to be more selector-specific}

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.

这篇关于如何删除具有相同值的重复下拉选项元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！