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

Question

i have implemented the Example . Here i am retrieving data using only one drop down list. Its working fine. But if I want to do the same for two drop down list that is values from database have to be retrieved based on the value of two drop down list. I am trying as follows: Ajax script-

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

drop down lists-

<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 file-

$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>";

Please help me how to do it.

Answer 1

There is an issue with how you are referencing the selected values of the SELECT elements, or more accurately, how your SELECT elements are structured. You need to place your ID (branch and sem) on the SELECT and not the individual options and you can remove the this.value parameter when you call showCourses() onchange because your function isn't set up to accept a parameter.

Try using this for your SELECTs

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

I also noticed that your check for selected values is looking for an empty string for either str or str1, but your "Select One" options have a value of 0 so you may want to change:

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

To

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