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

Dynamically update select element options in JavaScript and PHP

本文关键字：选择 元素 选项 PHP 更新 JavaScript 动态      更新时间：2023-09-26

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

我有一个下拉列表，用户从中选择分支，第二个下拉列表显示相关选项。

.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>';
}

这是您问题的完美答案： W3Schools AJAX PHP 数据库

如果将此示例集成到代码中，它应如下所示：

.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);

相关文章：