php - 使用 Javascript OnChange 对 MySQL 查询进行下拉排序？

Question

下面是我所拥有的内容的预览。我想做的是，当有人将下拉菜单更改为“Cooper”时，只有 Cooper 品牌轮胎会显示，它必须更新我的 MySQL 查询。如果他们将其更改回“所有轮胎品牌”，那么它会快速刷新并显示其中的每一个。

这样的事情可能吗？如果有人能给我指出正确的方向，我将非常感激。

谢谢!

Answer 1

$("#selectMenuId").bind("change", function(event) {
    var selectedID = event.target.value;
    $.post("path/to/your/serverSide.php", {
        selectionID: selectedID
    }, function(data) {
        $("#myContainer").html(data);
    });
});

以及serverSide.php你会想做这样的事情

if(isset($_POST["selectionID"])) {
    $sql = "SELECT * FROM someTable WHERE category_id = " . $_POST["selectionID"] . ";
    // run your query, build your new results, echo them back.
}

基本 id 是您将选定的值传递到服务器端页面，使用(我会假设某种类别 ID)值对数据库运行查询，构建新的结果集并返回它。如果不知道您目前如何构建列表，我将无法提供进一步的帮助。

<小时/>

编辑要显示加载程序，您可以执行类似的操作吗？

$("#selectMenuId").bind("change", function(event) {
    var selectedID = event.target.value;
    var container = $("#myContainer");
    container.html("Loading...");
    $.post("path/to/your/serverSide.php", {
        selectionID: selectedID
    }, function(data) {
        container.html(data);
    });
});

或者您可以使用带有加载 gif 的叠加层，只需 $("#loadingLayer").show()/.hide() 即可。

至于默认选择..您可以(使用服务器端语言)在页面上呈现默认 View 。或者您可以通过 JS 收集它，就像您获得其余结果一样...只需等待列表加载并触发“更改”

$("#selectMenuId").bind("change", function(event) {
    var selectedID = event.target.value;
    var container = $("#myContainer");
    container.html("Loading...");
    $.post("path/to/your/serverSide.php", {
        selectionID: selectedID
    }, function(data) {
        container.html(data);
    });
}).trigger("change");

希望这有帮助!