добавляющим Опциональные элементы в Select Ошибка

Question

У меня есть этот HTML структуру:

<div class="row"> 
    <div class="col-sm-6 p-l-0"> 
     <div class="form-group form-group-default form-group-default-select2 required"> 
     <select disabled class="kurir"> 
     <option select="selected"></option> 
     </select> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="form-group form-group-default form-group-default-select2 required"> 
     <select disabled class="tarif"> 
     <option select="selected"></option> 
     </select> 
     </div> 
    </div> 
</div> 

и вот мой JavaScript:

$(".kurir").change(function() { 

    var json_url = "some url here"; 

    $.getJSON(json_url, function(data) { 
     var tarif_items = ""; 
     $.each(data, function(key, val) { 
      tarif_items += "<option value='" + key + "'>" + val + "</option>"; 
      alert (key); // I can see the key value 
      alert (val); // I can see the val value 
     }); 
    }); 

    $(this).closest(".row").find(".tarif").css("background-color", "red"); // I can see there's background color 
    $(this).closest(".row").find(".tarif").prop("disabled", false); // I can see the select is active now 
    $(this).closest(".row").find(".tarif").append(tarif_items); // but I don't see this works, why? 

}); 

почему tarif_items не может быть добавлен в элемент выбора?

Answer 1

Это потому, что tarif_items не определен снаружи getJSON способ. даже если вы определяете его глобально, значение для него будет установлено через асинхронные вызовы. которые не будут отражать в вызове .append(). правильный путь к этому будет:

$(".kurir").change(function() { 

var json_url = "some url here"; 
var _thattarif = $(this).closest(".row").find(".tarif"); 
$.getJSON(json_url, function(data) { 
    $.each(data, function(key, val) { 
     alert (key); // I can see the key value 
     alert (val); // I can see the val value 
     _thattarif.css("background-color", "red"); 
     _thattarif.prop("disabled", false); 
     _thattarif.append("<option value='" + key + "'>" + val + "</option>"); 
    }); 
    }); 
});