Wie hole ich die Werte einer dynamischen Auswahlliste in eine globale Variable?

Question

Ich versuche, die Werte meiner dynamisch gefüllten Auswahlliste in einer globalen Variable zu erhalten. Dies ist, wie ich bekommen und füllen Sie die Auswahlliste:

Mein dropdown.js Skript:

$(document).ready(function() { 

    $("#slctTable").change(function() 
    { 
     $.getJSON("dropdown_code/get_fields.php?table=" + $(this).val(), success = function(data) 
     { 
      var options = ""; 
     for(var i = 0; i < data.length; i++) 
      { 
       options += "<option value='" + data[i] + "'>" + data[i] + "</option>"; 
      } 
     $("#slctField").html(""); 
     $("#slctField").append(options); 
     $("#slctField").change(); 
    });  
    }); 
}); 

So nach dieser tryed ich diesen Code in meinem main.js scgript die Werte der Auswahllisten zu bekommen:

$('#slctField > option').each(function(){ 
    console.log(this.value); // Use this.value to get the value of the option 
}); 

var options = []; 
$('#slctField > option').each(function(){ 
    options.push(this.value); 
}); 

console.log(options); 

Aber wenn ich meine Skripte dies das Ergebnis laufe ich zurück:

Aber wenn ich den Code kopieren und in Firebug einfügen und ausführen. Ich bekomme das Ergebnis, das ich will.So denke ich, die Auswahllisten sind noch nicht gefüllt, wenn ich versuche, die Werte zu bekommen. Aber ich stecke lange darauf und weiß nicht, was ich im Moment machen soll.

Answer 1

Da getJSON asynchron ist, können Sie zur Lösung Ihres Problems custom event auslösen, wenn die Auswahl abgeschlossen ist (am Ende von getJSON erfolgreich).

In meinem Beispiel habe ich dieses neue Ereignis slctFieldFilled verwendet.

Dies ist ein anderer Ansatz. Eine andere mögliche Lösung kann auf Callbacks basieren: Führen Sie am Ende einer asynchronen Funktion die Callback-Funktion aus, wie es bei getJSON der Fall ist.

Mein Schnipsel:

$(function() { 
 
    
 
    $.getJSON('https://api.github.com/users', success = function (data) { 
 
    var options = ''; 
 
    for (var i = 0; i < data.length; i++) { 
 
     options += "<option value='" + data[i].id + "'>" + data[i].id + "</option>"; 
 
    } 
 
    $("#slctTable").append(options); 
 
    $("#slctTable").change(); 
 
    }); 
 
    
 
    $("#slctTable").on('change', function(e) { 
 
    var par1 = $(this).val(); 
 
    $.getJSON("https://api.github.com/users", success = function(data) { 
 
     var options = ""; 
 
     for(var i = 0; i < data.length; i++) { 
 
     options += "<option value='" + data[i].id + "'>" + data[i].id + "</option>"; 
 
     } 
 
     $("#slctField").html(""); 
 
     $("#slctField").append(options); 
 
     $("#slctField").change(); 
 
     
 
     // 
 
     // Now, the slctField is filled, so trigger your custom event 
 
     // 
 
     $('#slctField').trigger('slctFieldFilled', options); 
 
    }); 
 
    }); 
 
    
 
    $("#slctField").change(function() { 
 
    var par1 = $(slctTable).val(); 
 
    var par2 = $(slctField).val(); 
 
    $.getJSON("https://api.github.com/users", success = function(data) { 
 
     var options = ""; 
 
     for(var i = 0; i < data.length; i++) { 
 
     options += "<option value='" + data[i].id + "'>" + data[i].id + "</option>"; 
 
     } 
 
     $("#slctAttribute").html(""); 
 
     $("#slctAttribute").append(options); 
 
     $("#slctAttribute").change(); 
 
    }); 
 
    }); 
 

 
    
 
    // listen on custom event... 
 
    $('#slctField').on('slctFieldFilled', function(e, optionVariable) { 
 
     var options = []; 
 
     $(optionVariable).each(function(index, element){ 
 
      options.push(this.value); 
 
     }); 
 
     $('#log').text(options); 
 
    }); 
 

 
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 

 
<select id="slctTable"></select> 
 
<select id="slctField"></select> 
 
<select id="slctAttribute"></select> 
 
<p id="log"></p>

Answer 2

Sie sind sehr richtig! Ihr GET ist asynchron und wird wahrscheinlich abgeschlossen sein, lange nachdem Ihr main.js Code ausgeführt wurde. Sie sollten sicherstellen, dass Ihre Änderungen an der globalen Variablen in gewisser Weise an Ihre Rückrufe gebunden sind, so dass sie später garantiert ausgeführt werden.

var options = []; 
$("#slctField").change(function() 
{ 
    $.getJSON("dropdown_code/get_attributes.php?table=" + $(slctTable).val() ,"field=" + $(slctField).val() , success = function(data) 
    { 
     ... 
     //Option 1: Append the values inside your callback. 
     //Use window.options because you have another local variable options(window.XX calls any global XX) 
     for(var i = 0; i < data.length; i++) 
     { 
      ... 
      window.options.push(data[i]); 
     } 
     //Option 2: Basically the same thing as 1, call a function that does the same thing at the end of your callback 
     populateOptions(); 
    });  
}); 
function populateOptions(){ 
    $('#slctField > option').each(function(){ 
     options.push(this.value); 
    }); 
} 

Es gibt viele andere Möglichkeiten, es so lange zu tun, wie Sie garantieren, dass es nach Ihrem GET ausgeführt wird. Wenn Sie Fragen haben, schreiben Sie einen Kommentar. Sei vorsichtig mit dem Umfang der Optionen, da du mehrere Variablen namens options hast (oder erwäge andere Namen, damit du später nicht verwirrt wirst!).