Question

我有一个数据库，其中有一个名为products的表，在表中我有标题，艺术家和其他一些每个产品都有信息的行。我学会了从数据库中显示数据，我还发现了一种只显示一个类别数据的方法。这听起来很容易。但我希望将所有这些与下拉菜单结合起来，用户可以从列表中选择他想要查看的类别。我该怎么做？我认为我必须使用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_ *函数，因为它适用于学校的项目

Answer 1

如果你被允许使用jquery，这个任务很简单。

我会有一个带显示功能的独立php页面。然后根据所选的类别，执行onselect（）或OnChange（）并将其加载到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：

<?php
mysql_select_db("myapp",$link);
$result = mysql_query('SELECT * FROM products WHERE category="' . $_GET['do'] . '"',$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);

?>

当然，重要的是要注意我没有包含任何预防措施，因为代码非常容易受到SQL注入的攻击。在放入查询之前，您应该确保清理任何输入。

我的jquery也有点生疏，所以如果我错过了什么，希望其他人可以编辑我的答案。

Answer 2

就像Jared说你可以分离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个参数：首先是类别然后是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的有用提示。

使用下拉列表显示一类数据

2 个答案: