php - 使用 Javascript 过滤来自数据库的结果，这将使 DIV 根据新参数重新加载其内容

Question

我需要创建一个带有复选框的表单来过滤从 MySQL 表中提取的结果。理想情况下，单击特定复选框后，将重新加载 DIV，运行适当的 PHP 和 PDO 查询以根据所选条件进行过滤。

到目前为止，这是我的代码，但它似乎不起作用...

有什么建议吗？

谢谢!

<script>
    $(document).ready(function() {
        $("#colors").change(function() {
            console.log("changed...");
            var data = $(this).serialize();
            console.log(data);
            $("#indexMain").load("index.php?data="+data)
        });
    })
</script>
<div class="colors">
    <form method="post" action="index.php">
        <?php
            $colors = mysql_query("SELECT DISTINCT color_base1 FROM item_descr ORDER BY color_base1");
            while ($colorBoxes = mysql_fetch_array($colors))
            {
                echo "<input type='checkbox' name='color' value='".$colorBoxes[color_base1]."' /> ".$colorBoxes[color_base1]."<br />";
            }
        ?>
        <input type="submit" onclick="document.formName.submit();" />
    </form>
</div>

然后我在我的 div 中得到如下值:

$color = $_POST['color'];
if ($selectedColor == '') 
{
$items = mysql_query("SELECT * FROM item_descr");
}
else 
{
$items = mysql_query("SELECT * FROM item_descr ORDER BY $color");
}

Answer 1

Colors 是您的 div 的名称，但我假设您希望在名称为 color 且没有 s.

$(document).ready(function() {
    $("input[type=checkbox][name=color]").change(function() {
        console.log("changed...");
        var data = $(this).serialize();
        console.log(data);
        $("#indexMain").load("index.php?data="+data)
    });
})