选择时填写下拉列表

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>