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

【问题标题】：Dynamically update select element options in JavaScript and PHP在 JavaScript 和 PHP 中动态更新选择元素选项
【发布时间】：2016-02-24 05:29:57
【问题描述】：

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

我有一个下拉菜单供用户选择分支，还有一个下拉菜单显示相关选项。

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>

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

【问题讨论】：

看看this。你也可以谷歌Ajax populate dropdown
无法弄清楚先生，我是这类事情的初学者，这就是为什么我发布了两个代码我下来

标签： javascript php drop-down-menu html-select

【解决方案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>

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

【讨论】：