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

Question

我使用jquery ajax填充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));
                    } 
                });
            }
    });
}

我如何解决这个问题，使它只填充一次而不是两次?

Answer 1

不要在循环中选择元素，因为当列表很大时会导致性能问题，而是在循环外选择它，然后创建<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>

---

Answer 2

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));
                }
            });