Question

jquery动态添加下拉栏，怎么去避免重复添加

我用ajax添加下拉栏：

success : function(data) {
var obj = eval(data);
for ( var i = 0; i < obj.length; i++) {
var opt = "<option value="+obj[i].id+">" + obj[i].cqname
+ "</option>"
$("#cqNAME").append(opt);
}
$("#cqNAME").append(opt);可以添加数据，但是每次重复选择不会把之前的情况，而是反复添加，我应该在for循环前写什么来清空下拉列表呢？？
我试过在for循环前写：$("#cqNAME").val("");
但怎么也没清空呢

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

1、如果后台是java，建议后台装置好数据返回给页面。你可以用set或者map来组装数据，去除重复。

2、如果一定要jquery来去重复。你可以通过递归和嵌套for循环的方式来去除相同元素。

Answer 3

<select id='citySelect'>
<option value=''>北京</option></select>方法：
<script>
//下拉框
$.get('/Huitubeccount/Expenses/SelectBrokerage', function (data) {//控制器路径
$("#HandleID").empty();//加上这个去重复
console.log(data);//输出
$.each(data, function (a) {//遍历
var str = ' <option value="' + data[a].HandleID + '">' + data[a].HandleName + '</option>'
$("#HandleID").append(str);
})
})
</script>

控制器
public ActionResult SelectAccountsurface()
{
var listAccountsurface = (from tbAccountsurface in mysql.FQ_Accountsurface
select new
{
tbAccountsurface.BalanceID,
tbAccountsurface.BserName,
}).ToList();
return Json(listAccountsurface, JsonRequestBehavior.AllowGet);
}

Answer 4

这样，在for之前加
$("#cqNAME").find("option").each(function(){
$(this).remove();
});
或者
$("#cqNAME").find("option").remove();

追问

搞定了，太感谢了

Answer 5

判断一下
望采纳