How to make a second list populate after a you select an item in the first list preferably from a data base/excell

Question

This is a pretty specific question that I hope I can get some insight to. I don't have any code on this part yet mainly because I'm not sure where to start.

There is a supervisor drop down and an agent drop down. The way I need it to work is that once you select a supervisor the corresponding agents will populate in the agent drop down. There are thousands of agents so it would take some time to actually go through and type them all out. We have a data base that populates and sorts the data automatically. Is there a way to code this so that A list you select from basically generates a second drop down list?

Thank you for any help in advance and sorry for the lack of code. I tried to research but I am coming up empty handed.

*edit, this is what I got after connecting to the server. It gives me the drop down for the supervisor but I am really lost at generating the list of agents that correlate with that supervisor. Ill continue to research what was said about ajax and json. But if someone can help me better understand that would be awesome, I cant find really any tutorials with MSSQL, only documentation.

$sql = "SELECT Supervisor FROM [tbl_Intake_SupervisorProfile]";
$stmt = sqlsrv_query( $conn, $sql );
if( $stmt === false) {
    die( print_r( sqlsrv_errors(), true) );
}

    echo"<Select Supervisoer='Supervisor'>";

while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
      echo "<option value='" . $row['Supervisor'] . "'>" . $row['Supervisor'] . "</option>";
}

    echo"</select>";

sqlsrv_free_stmt($stmt);


?>

Answer 1

jQuery:

$("#supervisor").on("change", populateAgents);

where the populateAgents function should be something like:

function populateAgents () {
   $.getJSON("getAgents.php", {supervisor: this.value}, function( agentsData ) {
       console.log( agentsData ); // test response
       // loop agents data and insert <option> elements into #agents 
   });
}

where in getAgents.php you'd have something like:

<?php

    // WARNING! This is a pseudo-demo!
    // Always sanitize (filter_var) your inputs and DB queries using PDO or such

    if ( isset($_GET["supervisor"])) {
       // SELECT * FROM agents WHERE supervisor = $_GET["supervisor"]
       // Than, after you build your $agentsArray
       echo json_encode($agentsArray);
       exit;
    }