通过AJAX使用JQuery获取HTML id

Question

I'm stuck..I have made a system which gets all colleges from a specific subject, and I want javascript to select the college the user has selected when he clicks on one so the presence of that class can be shown, just a summary: the user selects a subject, an AJAX request gets all colleges from that subject and another AJAX request has to get that specific college and use it to display the data.

This specific function gets the data from the subjects and displays them in a div with the id 'colleges'

function showAanwezigheid(str) {
    if (str == "") {
        document.getElementById("colleges").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("colleges").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","../controller/docentController.php?action=getColleges&vak="+str,true);
        xmlhttp.send();
    }
}

Here is the controller which calls the query and displays the result:

$vak = $_GET['vak'];
$colleges = $q->getColleges($vak); 
echo "<select id='college'>";
echo "<option>Selecteer een college:</option>";
foreach($colleges as $college){
echo "<option value='".$college->getCollege()."'>College ".$college->getCollege()."</option>";
}
echo "</select>";
}

This is the id where the result is being displayed

<span id="colleges"></span>

And this function should select the 'select' tag with the id 'college' to get that value on change

$(document).ready(function(){
    $('#vak').on('change', function() {
    var vak = this.value;
    alert(vak);
    $('#college').on('change', function() {
       var college = this.value;
       alert(college);
    });
    });
}); 

I feel like there would be such an easy fix but I just can't seen to make it work...

Answer 1

Change jQuery code like below:-

$(document).on('change','#vak',function() {
    var vak = $(this).val();
    alert(vak);
});
$(document).on('change','#college',function() {
    var college = $(this).val();
    alert(college);
});  

Note:- Make sure that jQuery library added before your script code. Otherwise you will get $ is undefined error

This is called Event Delegation

Answer 2

IF you want to get the value of the #college select on change then this would be simpler:

$(document).ready(function(){
    $('#vak').on('change', function() {
        var vak = $(this).val();
        alert(vak);
    });

    $('#college').on('change', function() {
       var college = $(this).val();
       alert(college);
    });
});

IF you noticed, The onchange of the #vak and the #college is separated