Anfügen Option Elemente in Wählen fehlgeschlagen

Question

Ich habe diese HTML-Struktur:

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

und hier ist mein 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? 

}); 

warum tarif_items nicht in ausgewähltes Element angehängt werden?

Answer 1

Das ist, weil tarif_items nicht außerhalb getJSON Methode definiert ist. Selbst wenn Sie es global definieren, wird der Wert dafür über asynchrone Aufrufe festgelegt. die nicht in .append() Anruf widerspiegeln. Der richtige Weg dazu wäre:

$(".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>"); 
    }); 
    }); 
});