在选择时填充下拉列表答案

【问题标题】：Fill DropDown List on selection在选择时填充下拉列表
【发布时间】：2019-06-13 16:40:31
【问题描述】：

大家好，我已经为我的项目工作了几个月。现在我正在尝试根据另一个名为 (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();

这是上面调用的函数（它确实有效，但我无法填充第二个下拉列表，因为它显示未定义为结果或在第二个下拉列表中没有）

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() 函数运行良好。 问题是 JSON 对象 listaCorsi，当我使用 $.each() 迭代该对象时，会打印 undefined对象的某个字段

【问题讨论】：

也许你会在这里找到答案stackoverflow.com/questions/11255219/…
@MattOpen 不是我正在寻找的答案
所以selezionaCorsoDocenti() 是那个不起作用的功能，其余的是？您能否验证该 ajax 调用是否有响应或共享任何状态错误？
@Steve0 selezionaCorsoDocenti() 完美运行。问题是，当我尝试在 JSON（已正确填充）上获取某个电子邮件的值时，它不起作用。每次 value.emailDocente 都是 undefined

标签： javascript jquery html json ajax

【解决方案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>

【讨论】：