Javascript填充列表到html选择重复列表两次

我正在使用jquery ajax来填充html选择。填充实际工作，但问题是，由于某种原因，整个列表被添加两次，而不是一次。Javascript填充列表到html选择重复列表两次

下面是代码：

myfunction: function() { 
    $.ajax({  
      url: 'the-url-here', 
      method: 'GET', 
      success: function(result) { 
       $.each(result.cars, function(result, value) { 
        if (value.active === '1'){ 
         $('#myselect').append($('<option>').text(value.name).attr('value', value.id)); 
        } 
       }); 
      } 
    }); 
}

我怎样才能解决这个问题，所以它只能填充一次，不是两次？

来源

2016-10-03 Marcos Belunti

您可以发布样本JSON数据？ –

是否有可能** myfunction **被调用两次？ – smcd

可能该函数被调用两次。为了检查，你可以在浏览器上标记一个断点成功函数。 –

myFunction是被称为地方两次，因为追加做的事情是应该做的（附加到列表），它的工作如预期:)

检查值尝试添加之前已添加它：

$.each(result.cars, function(result, value) { 
       if (value.active === '1' && $('#myselect option[value='+ value.id +']').length == 0) { 
        $('#myselect').append($('<option>').text(value.name).attr('value', value.id)); 
       } 
      });

来源

2016-10-03 14:32:10 zerohero

而是选择在循环，这会导致性能问题时，该列表是大的元素，选择它的外循环，然后创建您的<options>和外循环列表，附加到<select>。

(function($){$(function(){ 
 
    var carsDataFetchViaAjax = [ 
 
    {id: 1, active: 1, name: 'Car1'}, 
 
    {id: 2, active: 1, name: 'Car2'}, 
 
    {id: 3, active: 0, name: 'Car3'} 
 
    ] 
 
    
 
    var $select = $('#select'), 
 
     options = []; 
 
    
 
    carsDataFetchViaAjax.map(function(car, i){ 
 
    if (car.active == 1){ 
 
     options.push($('<option>').val(car.id).html(car.name)) 
 
    } 
 
    }) 
 

 
    $select.append(options); 
 
    
 
})})(jQuery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<select id="select"></select>

来源

2016-10-03 14:40:38 JorgeObregon

Javascript填充列表到html选择重复列表两次

回答

相关问题