Question

我正在尝试为我创建的图库创建过滤器。该画廊有5个过滤器使用下拉菜单。当从5个过滤器中选择一个项目时，它必须过滤图像。当选择第二个过滤器时，它必须过滤第一个过滤器的结果，依此类推。

我正在使用onchange='this.form.submit()'脚本但我不知道在选择项目时如何为其指定某个操作。这是我写作时的代码：

<td>
    Kleur:
    <form method="POST">
        <select name="kleur" onchange='this.form.submit()'>
            <option> -- Geen optie -- </option>
            <?php while ($line1 = mysqli_fetch_array($result1, MYSQLI_ASSOC)) { ?>
                <option value="<?php echo $line1['kleur']; ?>"> <?php echo $line1['kleur']; ?>
                </option>
            <?php } ?>
        </select>
    </form>

    <?php
    if (isset($_POST['submit'])) {
        $kleur = $_POST['kleur'];
        $SQL = "SELECT * FROM `rozen` WHERE `kleur` LIKE '$kleur'";
        $result = mysqli_query($connection, $sql);
        echo $result;
    }
    ?>

    </br>
</td>

以下部分似乎不起作用：

<?php
if (isset($_POST['submit'])) {
    $kleur = $_POST['kleur'];
    $SQL = "SELECT * FROM `rozen` WHERE `kleur` LIKE '$kleur'";
    $result = mysqli_query($connection, $sql);
    echo $result;
}
?>

有谁知道如何使用这个脚本？或者也可以解释如何在下拉菜单中保存所选项目？

Answer 1

您可以添加一个属性，其中包含您需要过滤到图片的所有信息

<img filterInfo="Kleur|Geur|Bloemvorm|Gezondheid|Type|Zoeken">

然后为所有过滤器设置一个类以捕获更改

$(".filters").on("change",function(){
    var kleur = $('[name=Kleur]').val();
    var Geur = $('[name=Geur]').val();
    ...
    ...
    ...

    $.each($('#gallery img'),function(i,v){
        var attrs = $(v).attr("filterInfo").slice("|");
        if((kleur == "" || kleur == attrs[0]) && (Geur == "" || == attrs[1]) .... other filters)
            $(this).show(); //or fadeIn();
        else
            $(this).hide(); //or fadeOut();
    });
});

带下拉列表的Onchange表单过滤器

1 个答案: