2015-04-04 71 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

相關問題