使用PHP的HTML下拉列表

我需要从大学选择中选择UniversityID，列出这所大学的学院进行学院选择。我读到使用AJAX很容易，但我无法解决它。目前，学院选择显示所有学院

在大学的研究所1和研究所2
大学第三学院

如果用户选择大学，我想在学院选择中显示学院1和学院2；如果用户选择大学，我想显示学院3

如何编写AJAX部分，或者有更好的方法吗

<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>

大学


研究所

您可以尝试以下示例代码来实现所需功能（Ajax调用）：

HTML（请将此文件放在web服务器上运行）

大学


请选择
麻省理工学院
丰收大学
斯坦福大学


研究所
请先选择大学
函数触发器1（）
{
var1=document.getElementById（“大学”）.value；
//警报（var1）；
$.ajax({
方法：“POST”，
网址：'http://www.createchhk.com/getfaculty.php?uid=“+var1，
成功：功能（响应）{
document.getElementById（“结果”）.innerHTML=响应；
},
错误：功能（请求、状态、错误）{
log（“出现错误：”，request.responseText）；
}
})
}

PHP（getfaculty.PHP）

艺术类
科学类
药
工程类
工商管理学士
艺术类
科学类
药
工程类
音乐
科学类
药
工程类

当您选择的大学发生变化时（比如调用PHP文件），您应该触发ajax，将查询结果返回到institute select框中的部分。（您想要一些示例代码还是想自己尝试一下？）在选择选项中更改

大学

时，您想在选择选项中显示的

学院

，请同时向我们显示您的数据库表结构，

学院表中有
大学id
@KUMAR yes在学院表中也有大学id。请参阅我的答案以获取示例代码
<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 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 } ?>