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

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>