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選擇重複列表兩次

回答

相關問題