用下拉列表顯示一個類別的數據

Question

我有一個數據庫，有一個名爲產品的表，並在表中我有標題，藝術家和一些其他行，每個產品的信息。我已經學會了顯示數據庫中的數據，並且我還找到了一種僅顯示來自一個類別的數據的方法。這聽起來很簡單。但我想將所有這些與下拉菜單結合在一起，用戶可以從列表中選擇他想查看的類別。我怎樣才能做到這一點？我認爲我必須使用JavaScript，但我發現的一些示例根本不涉及JavaScript。

這裏是我從我的數據庫顯示所有數據的代碼：

<?php 
$con = mysql_connect("localhost","root","password"); 
mysql_query('SET NAMES UTF8'); 
if (!$con) 
{ 
    echo "problem with connection" .mysql_error(); 
} 
?> 
<?php 
mysql_select_db("myapp",$link); 
$result = mysql_query('SELECT * FROM products',$link); 
while($row = mysql_fetch_array($result)) 
{ 
    $myimage = '<img src="'.$row['image'].'" />'; 

    echo "<div id='appear'>" . $myimage . '<br />' . $row['title'] . "<br 
/>" . "<p style='color:red;' >" . "myprice " . $row['price'] . "€" . "</p>". 
'<a href="image.php?id='.$row['id'].'">' 
    . "details" . "<a>" . "</div>" ;          
} 
mysql_close($link); 

    ?> 

這裏是我只從一個類別顯示數據代碼：

<?php 
mysql_select_db("myapp",$link); 
$result = mysql_query('SELECT * FROM products WHERE category="cd"',$link); 
while($row = mysql_fetch_array($result)) 
{ 
    $mycategory = $row['category']; 
    $myimage = '<img src="'.$row['image'].'" />'; 
    echo "<div id='appear'>" . $myimage . '<br />' . $row['title'] . "<br 
/>" . 
    "<p style='color:red;' >" . "price " . $row['price'] . "€" . "</p>". '<a 
href="image.php?id='.$row['id'].'">' 
    . "details" . "<a>" . "</div>" ; 
} 
mysql_close($link); 

?> 

，這裏是我的非常簡單的HTML下拉菜單

<select name="singlelist" id="singlelist" size="1" > 
<option value="mycd" >CD</option> 
<option value="mydvd" >DVD</option> 
<option value="other" >other</option> 
</select> 

我沒有提到我想要2下拉列表，用戶將選擇子類別，但我相信，如果我明白所有這些工作如何，我將能夠使其工作。 以前有沒有其他人經歷過這個？

PS：我用的是mysql_ *功能，因爲如果你被允許使用jquery這個任務很簡單，它■對於在學校

Answer 1

就像賈裏德說你可以分開PHP頁面並將數據加載到div。你可以觸發php頁面加載一個帶有javascript函數的div，並且還可以通過onselect（）或onchange（）來觸發該函數。

我希望這個示例代碼有幫助。

HTML：

<script type="text/javascript"> 
    function getList(cat, url, containerid){ 
     var xhr=false; 
     if (window.XMLHttpRequest) { 
       xhr = new XMLHttpRequest(); 
      } 
      else { 
       if (window.ActiveXObject) { 
        try { 
         page_request = new ActiveXObject("Msxml2.XMLHTTP") 
        } 
        catch (e){ 
         try { 
          page_request = new ActiveXObject("Microsoft.XMLHTTP") 
         } 
         catch (e){ 
         } 
        } 
       } 
      } 

      if (xhr) { 
       var params = "?list="+cat 
       xhr.onreadystatechange = showContents; 
       xhr.open("GET", url+params, true); 
       xhr.send(null); 
      } 
      else { 
       alert("Sorry, but I couldn't create an XMLHttpRequest"); 
      } 

     function showContents(){ 
      if (xhr.readyState == 4) { 
       if (xhr.status == 200) { 
        var outMsg = xhr.responseText; 
       } 
       else { 
        var outMsg = "There was a problem with the request " + xhr.status; 
       } 

       document.getElementById(containerid).innerHTML=xhr.responseText; 
      } 

     } 
    } 

</script> 

    <select name="singlelist" id="singlelist" size="1" onchange="getList(this.options[this.selectedIndex].value, 'php_file.php', 'container')" > 
    <option value="cd" >CD</option> 
    <option value="dvd" >DVD</option> 
    <option value="other" >other</option> 
    </select> 
    <div id="container"> </div> 

你應該轉嫁的GetList功能3個PARAMS： 第一類那麼php文件，最後的DIV ID。

類似這樣的例子

onchange="getList('category', 'php_file', 'div_id')" 

PHP：

<?php 
    if(isset($_GET['list'])){ 
    mysql_select_db("myapp",$link); 
    $result = mysql_query('SELECT * FROM products WHERE category="'.$_GET['list'].'"',$link); 
    while($row = mysql_fetch_array($result)) 
    { 
     $mycategory = $row['category']; 
     $myimage = '<img src="'.$row['image'].'" />'; 
     echo "<div id='appear'>" . $myimage . '<br />' . $row['title'] . "<br 
    />" . 
     "<p style='color:red;' >" . "price " . $row['price'] . "€" . "</p>". '<a 
    href="image.php?id='.$row['id'].'">' 
     . "details" . "<a>" . "</div>" ; 
    } 
    mysql_close($link); 
    } 
?> 

我希望這有助於。你也可以訪問這個博客http://crisostomozaidem.blogspot.com/這裏有一些關於PHP的有用提示。

Answer 2

的項目。

我會有一個單獨的PHP頁面的顯示功能。然後根據選擇的類別，做一個onselect（）或OnChange（）並讓它將php頁面加載到div中。

下面是如何做到這一點的例子：

HTML：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 

<select name="singlelist" id="singlelist" size="1" OnChange=$("#container").load("load.php?do=this.options[this.selectedIndex].value")> 
<option value="mycd" >CD</option> 
<option value="mydvd" >DVD</option> 
<option value="other" >other</option> 
</select> 

<div id=container></div> 

PHP：

當然，需要注意的是非常重要的，我並沒有包括任何種類的預防措施和代碼是非常容易受到SQL注入。您應該確保在將任何輸入放入查詢之前對其進行清理。

我對我的jquery也有點生疏，所以如果我錯過了希望其他人可以編輯我的答案的東西。