选择时填写下拉列表

Question

Helo guys, I've been working for my project for several months. Now I'm trying to fill my dropdown list named (drpIdCorsi), based on the selection of another dropdown list named (drpDocente).

This is how my JSON object is composed:

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

I've loaded with an AJAX request a JSON object (which is filled correctly). Now I'm trying to navigate my JSON object and fill the dropdown list, but it doesn't work.

This is the first function:

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

This is the function called above (It actually works, but I'm not able to fill the second dropdown list, cause it shows undefined as result or nothing in the second dropdown list)

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

I'd like to fill the second dropdown list like this:

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

The function selezionaCorsoDocenti() WORKS JUST FINE. The problem is that the JSON object listaCorsi , when I iterative over that object with the $.each() prints undefined for a certain field of the object

Answer 1

Your main issue is in this line:

var listaCorsi = selezionaCorsoDocenti();

$.get('selezionaCorsiPerDocente',.... is an ajax call, so it's asynchronous. You need to wait in order to get the result.

Moreover, when a change happens you need to empty the dropdown. From:

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

to:

$('#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>