javascript - 如何使用ajax根据两个下拉列表的值从数据库检索数据？

Question

我已经实现了 Example 。在这里，我仅使用一个下拉列表检索数据。它工作正常。但是，如果我想对两个下拉列表执行相同的操作，则必须根据两个下拉列表的值检索数据库中的值。 我正在尝试如下: Ajax脚本-

<script> // AJAX Implementation
function showCourses() {
    str = document.getElementById("branch").value;
    str1 = document.getElementById("sem").value;
    if (str == "" || str1 == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
    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("txtHint").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "listCourseByAjax.php?p=" + str + "&q=" + str1, true);
    xmlhttp.send();
}
</script>

下拉列表-

<select name="branch" onchange="showCourses(this.value)">
        <option id="branch" value="0" selected>Select one</option>
            <option id="branch" value="ISE">1/option>
            <option id="branch" value="CSE">2</option>
            <option id="branch" value="ME">3</option>
</select>
<select name="sem" onchange="showCourses(this.value)">
    <option id="sem" value="0" selected>select one</option>
    <option id="sem" value="I-P">I-P</option>
    <option id="sem" value="I-C">I-C</option>
    <option id="sem" value="II-P">II-P</option>
</select>

php 文件-

$p = $_GET['p'];
$q = $_GET['q'];
$sql="SELECT * FROM course_details WHERE sem='" . $q . "' AND branch='" . $p . "'";
$result = mysql_query($sql);

echo "<table border='1'>
<tr>
    <th>Course Code</th>
    <th>Course Name</th>
    <th>Course Instructor</th>
    <th>Credit</th>
</tr>";

请帮我看看该怎么做。

Answer 1

您引用 SELECT 元素的选定值的方式存在问题，或者更准确地说，您的 SELECT 元素的结构方式存在问题。您需要将您的 ID(分支和 sem)放在 SELECT 上，而不是单个选项上，并且您可以在调用 showCourses() onchange 时删除 this.value 参数，因为您的函数未设置为接受参数。

尝试将其用于您的选择

<select name="branch" id="branch" onchange="showCourses()">
  <option value="0" selected>Select one</option>
  <option value="ISE">1</option>
  <option value="CSE">2</option>
  <option value="ME">3</option>
</select>
<select name="sem" id="sem" onchange="showCourses()">
  <option value="0" selected>select one</option>
  <option value="I-P">I-P</option>
  <option value="I-C">I-C</option>
  <option value="II-P">II-P</option>
</select>

我还注意到您对所选值的检查正在寻找 str 或 str1 的空字符串，但您的“选择一个”选项的值为 0，因此您可能需要更改:

if (str == "" || str1 == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
}

至

if (str == "0" || str1 == "0") {
    document.getElementById("txtHint").innerHTML = "";
    return;
}