在JavaScript和PHP中动态更新选择元素选项

Question

我在填充下拉列表时遇到问题。

我有一个下拉菜单，用户可以从中选择分支，第二个下拉菜单显示相关选项。

HTML

<select id="first-choice" onchange="leaveChange()">
    <option selected value="base">Please Select</option>
    <option value="CSE">CSE</option>
    <option value="ECE">ECE</option>
    <option value="EEE">EEE</option>
    <option value="MECH">MECH</option>
</select>
<br>
<select id="second-choice">
    <option>Please choose from above</option>
</select>

JS

function leaveChange(){
    //what to insert here;
}

PHP

$branch=$_GET['branch'];
$username = "jaggu";
$password = "8374";
$hostname = "localhost";

$dbhandle = mysqli_connect($hostname, $username, $password) or die("Unable to connect to MySQL");
$selected = mysqli_select_db($dbhandle,"test") or die("Could not select examples");

$query = "SELECT * FROM `register` WHERE classid LIKE '%".$branch."%'";

$result = mysqli_query($dbhandle,$query);
    $row = mysqli_fetch_object($result);
    $query1="SELECT * FROM `examdup` WHERE `classid` LIKE '%".$branch."%'";
$result1= mysqli_query($dbhandle,$query1);  

while ($row1= mysqli_fetch_object($result1)) {
    echo '<option value="'.$row1->month_year.'">'. $row1->title.'</option>';
}

Answer 1

这是您的问题的完美答案：W3Schools AJAX PHP Database

并且如果将此示例集成到您的代码中，它应该看起来像这样：

HTML

<select id="first-choice" onchange="leaveChange(this.value)">
    <option selected value="">Please Select</option>
    <option value="CSE">CSE</option>
    <option value="ECE">ECE</option>
    <option value="EEE">EEE</option>
    <option value="MECH">MECH</option>
</select>
<br>
<select id="second-choice">
    <option>Please choose from above</option>
</select>

JS

function leaveChange(branch){
        if (branch == "") {
            document.getElementById("second-choice").innerHTML = "<option>Please choose from above</option>";
            return;
        } else { 
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("second-choice").innerHTML = xmlhttp.responseText;
                }
            };
            xmlhttp.open("GET","test.php?branch="+branch,true);
            xmlhttp.send();
        }
    }

您应在此行将文件test.php的名称替换为您的名称：xmlhttp.open("GET","test.php?branch="+branch,true);