动态更新 JavaScript 和 PHP 中的 select 元素选项
Dynamically update select element options in JavaScript and PHP
我在填充下拉列表时遇到问题。
我有一个下拉菜单,用户可以从中选择 分支 ,第二个下拉菜单显示 相关选项 。
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 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);
我在填充下拉列表时遇到问题。
我有一个下拉菜单,用户可以从中选择 分支 ,第二个下拉菜单显示 相关选项 。
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 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);