如何删除重复值 - >下拉选项元素?
我有以下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做到这一点?
答案 0 :(得分:26)
使用.siblings()
(定位同级option
元素)和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>
(也适用于同一页面上的多个.select
)
我在.select
元素中添加了一个类<select>
,使其更具选择性
工作原理:
虽然option
逐个访问.val()
,但查找.sibling()
option
个"[value='"+ this.value +"']"
{{1}}
答案 1 :(得分:9)
正确的解决方案是不允许服务器具有重复值....
试
var map = {};
$('select option').each(function () {
if (map[this.value]) {
$(this).remove()
}
map[this.value] = true;
})
演示:Fiddle
答案 2 :(得分:5)
使用它:
$(document).ready(function () {
var usedNames = {};
$("select > option").each(function () {
if (usedNames[this.value]) {
$(this).remove();
} else {
usedNames[this.value] = this.text;
}
});
});
答案 3 :(得分:2)
<强> 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 强>
var seen = {};
jQuery('.something').children().each(function() {
var txt = jQuery(this).attr('value');
if (seen[txt]) {
jQuery(this).remove();
} else {
seen[txt] = true;
}
});
答案 4 :(得分:1)
这个怎么样。
DEMO:http://jsfiddle.net/naokiota/yayTm/2/
var exist = {};
$('select > option').each(function() {
if (exist[$(this).val()]){
$(this).remove();
}else{
exist[$(this).val()] = true;
}
});
希望这有帮助。
答案 5 :(得分:1)
未经测试,但这样的事情应该有效
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()
}
}
答案 6 :(得分:0)
#这是另一个快速的选项迭代选项,计算重复项并在重复项超过一个时将其删除#
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();
}
});
答案 7 :(得分:0)
您可以使用以下代码删除具有重复值的选项。
$(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();
})
});