Question

jquery 动态添加select 如何避免重复添加（去重）

我用ajax添加下拉栏：success : function(data) {var obj = eval(data);for ( var i = 0; i < obj.length; i++) {$(".city").append("<option value='"+obj[i].city+"'>"+obj[i].city+"</option>");}$(".city").append("")可以添加数据，但是会添加很多重复数据我试过在for循环后写：//去重$(".city option").each(function() { var getText = $(this).text(); if($(".city option:contains("+getText+")").length > 1){$(".city option:contains("+getText+"):gt(0)").remove(); }});但是只有第一条数据有效果 其他的动态添加select效果也没了 删掉去重 所以数据都有动态下拉列表值（数据重复添加）

Answer 1

1、确定当前需要添加元素的text以及对应的value

2、获取当前下拉框中所有的option元素数组optionArr，可以通过$('#citySelect option')获取元素集合。
3、遍历optionArr，判断需要添加的text或者value是否和optionArr相同，相同则不添加，没有重复则添加。
示例：
<select id='citySelect'>
<option value='beijing'>北京</option>
<option value='shanghai'>上海</option>
</select>
方法：
<script>
function addCity(value, text){
var optionArr = $('#citySelect option');
for(var i=0;i<optionArr.length;i++){
if(optionArr[i].text == text || optionArr[i].value == value){
return false;
}
}
var addOption = "<option value='" + value + "'>" + text + "</option>";
$('#citySelect').append(addOption);
}
</script>

Answer 2

jquery去重复 如何去除select控件重复的option

方法也比较多，这里提供一个使用jquery选择器 :contains 的方法：
$(":contains(text)"); // 选取包含指定字符串的元素
这样就可以选出包含重复字符串的option元素，然后将其删掉

追问

您好 麻烦您可以写一个实例吗

Answer 3

添加之前先清除select标签中的内容，$(".city").html("");然后再append();就不会有重复数据了

Answer 4

添加之前做一件事，判断是否已经存在名称。判断的方式很多，比较简单的就是jquery获取option集合，循环判断文本是否相同，相同则已经存在，提示不能添加。或者用contains，fiter等选择器，具体用法教程很多也很简单。

Answer 5

//每次添加前清空一次
success : function(data) {
    var obj = eval(data);
    if(obj.length > 0){
        $(".city").html("");
    }
    for ( var i = 0; i < obj.length; i++) {
    ...

追问

还是有重复的

追答

那就是data中的存在重复数据可以

var obj = eval(data);

var citys = [];
var city_set;
for(var i in obj){
    citys.push(obj[i].city);
}
city_set = new Set(citys); //去重
city_set.forEach(function(c){
     $(".city").append("<option value='"+c+"'>"+c+"</option>");   
});

追问

这样的话 不就一直循环下去了 每执行一次把数据库所有的city带出来了 而且 叠加的越来越多