HTML 中的下拉列表使用 PHP

Question

我需要从 University Selection 中获取 UniversityID 以列出这所大学中的学院以供 Institute Selection。我读到 AJAX 很容易，但我无法解决它。目前学院选择显示所有学院。

Institute_1 和 Institute_2 在 University_1
Institute_3 在 University_2

我想在学院选择中显示 Institute_1 和 Institute_2 如果用户选择 University_1
或
Institute_3 如果用户选择 University_2

我怎么写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（请将此文件放在运行的网络服务器中）

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

HTML 中的下拉列表使用 PHP

Dropdown list in HTML using PHP

html

php

ajax

html-select

dropdown