如何獲取全局變量中動態選擇列表的值？

Question

我想要在全局變量中獲取動態填充的選擇列表的值。這是我如何獲得並填寫選擇列表：

我dropdown.js腳本：

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

所以在此之後我tryed這個代碼在我main.js scgript獲得選擇列表的值：

$('#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); 

但是當我運行我的腳本這樣的結果，我回去：

但是當我複製並粘貼在Firebug的代碼並運行它。我得到了我想要的結果。因此，當我嘗試獲取值時，我認爲選擇列表尚未填充。但是我長期堅持這一點，我不知道現在該做什麼。

Answer 1

因爲getJSON是異步的，所以爲了解決您的問題，您可以在選擇完成時（在getJSON成功結束時）觸發custom event。

在我的例子中，我使用了這個slctFieldFilled新事件。

這是一種不同的方法。另一種可能的解決方案可以基於回調：在異步函數結束時執行回調函數，就像getJSON一樣。

我的片段：

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

你是非常正確的！你的GET是異步的，在你的main.js代碼完成執行後很可能會很長時間。您需要確保您對全局變量的修改以某種方式與您的回調綁定，以保證後續運行。

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

還有很多其他的方法來做到這一點，以及只要你能保證它的GET後執行。如果您有任何問題，請發表評論。請注意選項的範圍，因爲您有多個名爲options的變量（或者考慮不同的名稱，以便您以後不會感到困惑！）。