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

所以在此之后我在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是异步的，为了解决您的问题，您可以在完成选择时触发custom event（在getJSON成功结束时）。

在我的例子中，我使用了这个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的变量（或考虑不同的名称，以便以后不要混淆！）。

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

2 个答案: