如何获取全局变量中动态选择列表的值？

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的变量（或者考虑不同的名称，以便您以后不会感到困惑！）。