HTML 中的下拉列表使用 PHP

Question

我需要從大學選擇中獲取 UniversityID 來列出這所大學的學院以進行學院選擇。 我讀到 AJAX 很容易，但我無法解決。 目前研究所選擇顯示所有研究所。

University_1中的Institute_1和Institute_2
學院_3 in University_2

如果用戶選擇University_1 ，我想在學院選擇中顯示Institute_1和Institute_2
或者
如果用戶選擇University_2 ，則Institute_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>

Answer 1

您可以嘗試以下示例代碼來實現您想要的（Ajax 調用）：

HTML（請將此文件放在 web 服務器中運行）

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