選擇時填寫下拉列表

Question

大家好，我已經為我的項目工作了幾個月。 現在，基於對另一個名為（drpDocente）的下拉列表的選擇，我試圖填充名為（drpIdCorsi）的下拉列表。

這是我的JSON對象的組成方式：

listaCorsi = 
 [
   {nomeCorso: "some course name"},
   {emailDocente: "some email"},
 ] 

我已經用AJAX請求加載了一個JSON對象（正確填充）。 現在，我試圖導航我的JSON對象並填充下拉列表，但是它不起作用。

這是第一個功能：

var listaCorsi = selezionaCorsoDocenti();

var listaCorsiDDL = '';
$('#drpDocente').on('change',function()
{ 
    docente = $('#drpDocente').val(); 
    docente = docente.trim();
    docente= docente.split("-")[0];//gets the email of the professor

    console.log(listaCorsi);
    console.log(docente);
    console.log(listaCorsi);
    if(!$.isArray(listaCorsi))
        listaCorsi = [listaCorsi];
    $.each(listaCorsi,function(key,value)
    {
        console.log(value);
        if(docente == value.emailDocente)
            listaCorsiDDL += '<option value="">' + value.nomeCorso + '</option>';
    });

    $('#drpIdCorsi').append(listaCorsiDDL);

}).change();

這是上面調用的函數（它確實有效，但是我無法填寫第二個下拉列表，因為它在結果中顯示為undefined，或者在第二個下拉列表中均未顯示）

function selezionaCorsoDocenti()
{
var listaCorsi = [{}];
$.get('selezionaCorsiPerDocente',function(responseJson)
{
    if(responseJson != null)
    {
        var i = 0;
        $.each(responseJson,function(key,value)
        { 
                listaCorsi[i] = [{nomeCorso: value.NOME_CORSO}, {emailDocente: value.EMAIL}];
                i = i + 1;  
        });
    }
    else
        alert("AJAX FAILED");
});
return listaCorsi;
}

我想這樣填寫第二個下拉列表：

if(docente === value.EMAIL)
   course += '<option value="">' + value.NOME_CORSO + '</option>
$('#drpIdCorsi').append(course);

函數selezionaCorsoDocenti（）很好 。 問題是當我使用$ .each（）遍歷該對象時，JSON對象listaCorsi會為該對象的某個字段打印未定義的內容

Answer 1

您的主要問題在以下行中：

var listaCorsi = selezionaCorsoDocenti();

$ .get（'selezionaCorsiPerDocente'，....是ajax調用，因此是異步的。您需要等待才能得到結果。

此外，發生更改時，您需要清空下拉菜單。 從：

$('#drpIdCorsi').append(listaCorsiDDL);

至：

$('#drpIdCorsi').empty().append(listaCorsiDDL);

 function selezionaCorsoDocenti() { var listaCorsi = [{}]; return $.get('https://gist.githubusercontent.com/gaetanoma/5f06d1dbd111ff6a7778cd6def6b1976/raw/037587e927ac297e1f4907364898ead22ed03a0d/selezionaCorsiPerDocente.json',function(responseJson) { responseJson = JSON.parse(responseJson); if(responseJson != null) { var i = 0; $.each(responseJson,function(key,value) { listaCorsi[i] = [{nomeCorso: value.nomeCorso}, {emailDocente: value.EMAIL}]; i = i + 1; }); } }); } selezionaCorsoDocenti().then(function(x) { listaCorsi = JSON.parse(x); $('#drpDocente').trigger('change'); }); $('#drpDocente').on('change',function(e) { var listaCorsiDDL = ''; docente = $('#drpDocente').val(); docente = docente.trim(); docente= docente.split("-")[0];//gets the email of the professor if(!$.isArray(listaCorsi)) listaCorsi = [listaCorsi]; $.each(listaCorsi,function(key,value) { if(docente == value.emailDocente) listaCorsiDDL += '<option value="">' + value.nomeCorso + '</option>'; }); $('#drpIdCorsi').empty().append(listaCorsiDDL); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="drpIdCorsi"></select> <select id="drpDocente"> <option>docente1@mail.edu</option> <option>docente2@mail.edu</option> <option>docente3@mail.edu</option> </select>