Dropdown list in HTML using PHP

I need to take UniversityID from the University selection to list institutes in this university for Institute Selection. I read it is easy with AJAX but I couldn’t solve it. For now Institute selection show all the institutes.

Institute_1 and Institute_2 in University_1
Institute_3 in University_2

I want to show Institute_1 and Institute_2 in Institute selection if user chose University_1
or
Institute_3 if user chose University_2

How I can write AJAX part or is there any better way?

<label>University</label>
    <select name="University" id="University">
    <?php
    $sql = "SELECT * FROM University";
    $stmt = sqlsrv_query( $conn, $sql);
    if( $stmt === false ) {
        die( print_r( sqlsrv_errors(), true));
    }
    while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
    ?>
    <option value="<?php echo $row['UniversityID']; ?>"><?php echo $row['University_NAME']; ?></option>
    <?php } ?>
    </select>
    <br>

    

    <label>Institute</label>
    <select name="Institute" id="Institute">
    <?php
    $sql = "SELECT * FROM Institute ";
    $stmt = sqlsrv_query( $conn, $sql);
    if( $stmt === false ) {
        die( print_r( sqlsrv_errors(), true));
    }
    while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
    ?>
    <option value="<?php echo $row['InstituteID']; ?>"><?php echo $row['Institute_NAME']; ?></option>
    <?php } ?>
    </select>
    <br>

Answer

You may try the following sample codes to achieve what you want (Ajax call) :

HTML (place this file in a web server to run please)

<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
  
<label>University</label>
<br>
    <select name="University" id="University" onchange="javascript:trigger1();">
    <option value="">Please select</option>
    <option value="UID01">MIT</option>
    <option value="UID02">Harvest University</option>
    <option value="UID03">Stanford University</option>
    </select>
    <br>

    

<label>Institute</label>
<div id=result>
<select name=Institute id=Institute>
<option value="">Please select University First
</select>
</div>


<script>
function trigger1()
{
var1=document.getElementById("University").value;
//alert(var1);



$.ajax({
 method: 'POST',
url: 'http://www.createchhk.com/getfaculty.php?uid='+var1,
    success: function(response){
        document.getElementById("result").innerHTML=response;
    },
    error: function (request, status, error) {
        console.log("There was an error: ", request.responseText);
    }
  })
}
</script>

PHP (getfaculty.php)

<?php if ($_REQUEST["uid"]=="UID01") { ?>
<select name="Institute" id="Institute">
<option value="Arts">Arts
<option value="Science">Science
<option value="Medicine">Medicine
<option value="Engineering">Engineering
</select>
<?php } ?>

<?php if ($_REQUEST["uid"]=="UID02") { ?>
<select name="Institute" id="Institute">
<option value="BBA">BBA
<option value="Arts">Arts
<option value="Science">Science
<option value="Medicine">Medicine
<option value="Engineering">Engineering
</select>
<?php } ?>


<?php if ($_REQUEST["uid"]=="UID03") { ?>
<select name="Institute" id="Institute">
<option value="Music">Music
<option value="Science">Science
<option value="Medicine">Medicine
<option value="Engineering">Engineering
</select>
<?php } ?>