グローバル変数で動的選択リストの値を取得する方法は？

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

しかし、私はこの結果を私のスクリプトを実行するとき、私は戻って取得：

をしかし、私はコピーして、放火犯のコードを貼り付けて、それを実行したとき。私は結果を得る。私は値を取得しようとすると、選択リストはまだ満たされていないと思う。しかし、私はこれに長い間固執しており、私は現時点で何をすべきか分かりません。

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後に実行することが保証されている限り、他にも多くの方法があります。ご質問がある場合は、コメントを投稿してください。オプションの名前に複数の変数があるので、オプションのスコープに注意してください（または後で混乱させないように異なる名前を考えてください）。