根据选择填写下拉列表

时间:2019-06-13 16:40:31

标签: javascript jquery html json ajax

伙计们,我已经为我的项目工作了几个月。 现在,基于对另一个名为(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 会打印 undefined 对象的特定字段

1 个答案:

答案 0 :(得分:2)

您主要的问题是在这一行:

<?php
$urlContent = file_get_contents('https://www.google.co.il/searchq=cow&rlz=1C1SQJL_iwIL827IL82&source=lnms&tbm=isch&sa=X&ved=0ahUKEwje7-3q8uPiAhUG_qQKHdWAACwQ_AUIECgB&biw=1280&bih=578');

$dom = new DOMDocument();
@$dom->loadHTML($urlContent);
$xpath = new DOMXPath($dom);
$hrefs = $xpath->evaluate("/html/body//a");

for($i = 0; $i < $hrefs->length; $i++){
    $href = $hrefs->item($i);
    $url = $href->getAttribute('href');
    $url = filter_var($url, FILTER_SANITIZE_URL);
    // validate url
    if(!filter_var($url, FILTER_VALIDATE_URL) === false){
        echo '<a href="'.$url.'">'.$url.'</a><br />';
    }
}

?>

$。get('selezionaCorsiPerDocente',.... ”是一个ajax调用,因此它是异步的。您需要等待以获取结果。

此外,发生更改时,您需要清空下拉菜单。发件人:

var listaCorsi = selezionaCorsoDocenti();

收件人:

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