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

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

Answer 2

不是选择循环中的元素，而是在列表很大时导致性能问题，而是在循环外选择它，然后在循环外创建<options>列表，附加到{{1} }。

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

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

2 个答案: