2015-04-04 70 views
1

我已经有了使用ajax进行一个下拉选择的数据检索工作,但是我希望它能够根据两个下拉选择条件检索数据。我如何解析两个变量到我的showChoice函数,然后将第二个选择存储在另一个变量中。我将不胜感激任何帮助。如何根据两个下拉选择从数据库中检索数据

<html> 
    <head> 
    <script> 
     function showChoice(str) { 
     if (str == "") { 
      document.getElementById("txtHint").innerHTML = ""; 
      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("txtHint").innerHTML = xmlhttp.responseText; 
      } 
      } 
      xmlhttp.open("GET","getuser.php?q="+str,true); 
      xmlhttp.send(); 
     } 
     } 
    </script> 

    </head> 
    <body> 

    <form> 
     <select name="choices" onchange="showChoice(this.value)"> 
     <option value="">Select a departure point:</option> 
     <option value="London">London</option> 
     <option value="New Castle">New Castle</option> 
     </select> 
    </form> 
    </body> 
</html> 

然后getuser.php DOC

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
    table { 
    width: 100%; 
    border-collapse: collapse; 
    } 

    table, td, th { 
    border: 1px solid black; 
    padding: 5px; 
    } 

    th {text-align: left;} 
    </style> 
    </head> 
    <body> 

    <?php 
     $q = $_GET["q"]; 


     $con = mysqli_connect('localhost','root','','busdb'); 
     if (!$con) { 
     die('Could not connect: ' . mysqli_error($con)); 
     } 

     mysqli_select_db($con,"busdb"); 
     $sql="SELECT * FROM busRoutes WHERE Departure = '".$q."'"; 
     $result = mysqli_query($con,$sql); 


     echo "<table> 
     <tr> 
     <th>ID</th> 
     <th>Departure</th> 
     <th>Destination</th> 
     <th>Time</th> 

     </tr>"; 
     while($row = mysqli_fetch_array($result)) { 
     echo "<tr>"; 
     echo "<td>" . $row['ID'] . "</td>"; 
     echo "<td>" . $row['Departure'] . "</td>"; 
     echo "<td>" . $row['Destination'] . "</td>"; 
     echo "<td>" . $row['Time'] . "</td>"; 
     echo "</tr>"; 
     } 
     echo "</table>"; 


     mysqli_close($con); 
    ?> 
    </body> 
</html> 

回答

0

你可以使用这个样子,一看。可能是你需要包括jQuery库,如果你错过了这个

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

更新你这样的代码

function showChoice(str,sel2) { 
if (str == "") { 
    document.getElementById("txtHint").innerHTML = ""; 
    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("txtHint").innerHTML = xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET","getuser.php?q="+str+"&q2="+sel2,true); 
    xmlhttp.send(); 
} 
} 

$(document).ready(function() 
{ 
    $('.select').change(function() 
    { 
     var sel1=$('#select1').val(); 
     var sel2=$('#select2').val(); 
     showChoice(sel1,sel2); 

    }) 

}); 

HTML看起来像这样

</head> 
<body> 

<form> 
<select id="select1" class="select" name="choices"> 
<option value="">Select a departure point:</option> 
<option value="London">London</option> 
<option value="New Castle">New Castle</option> 
</select> 

<select id="select2" class="select" name="choices2"> 
<option value="">Select a departure point:</option> 
<option value="London">London</option> 
<option value="New Castle">New Castle</option> 
</select> 
</form> 
</body> 
</html> 

UPDATE

这里jsfiddle link

UPDATE2

getuser.php

<? 
echo $q=$_GET['q']; 
echo $q2=$_GET['q2']; 

?> 
+0

我感谢帮助芽,我更新了我的SQL SELECT语句如下: $ SQL = “SELECT * FROM busRoutes WHERE出发=“” $。 q。“'AND Destination ='”。$ q2。“'”; 但似乎没有发生,甚至没有错误。 你可以解释一下$(dcoument).ready(function()中的代码以及为什么添加它吗? – Doni 2015-04-04 11:37:23

+0

是否添加了$ q2 = $ _GET [“q2”];在你的php文件中? – MKD 2015-04-04 11:39:19

+0

$(dcoument ).ready(function()只是一个jquery事件。这里是完整的描述http://learn.jquery.com/using-jquery-core/document-ready/ – MKD 2015-04-04 11:40:51

相关问题