Javascript가 html로 반복 목록을 두 번 선택합니다.

Question

html select를 채우기 위해 jquery ajax를 사용하고 있습니다. 채우기가 실제로 작동하지만 문제는 몇 가지 이유 때문에 전체 목록이 단 한 번이 아닌 두 번 추가된다는 것입니다.

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>의 루프 외부 목록을 만들고, 루프 외부로 선택 <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>

---