使用Javascript OnChange下拉排序MySQL查询？

Question

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

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

谢谢！

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是您将所选值传递给serverSide页面，使用（我假设某种类别ID）值对DB运行查询，构建新结果集并返回它。如果不知道你目前如何构建列表，我将无法进一步提供帮助。

---

修改 的 要显示一个装载机你可以做这样的事情吗？

$("#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（）。

默认选择..您可以（使用您的ServerSide语言）在页面上呈现默认视图。或者您可以通过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");

希望这有帮助！

Answer 2

当然，这是可能的。

您需要为弹出窗口分配一个javascript事件监听器。当访问者从弹出窗口中选择一个项目时，您将使用AJAX调用向服务器上的Web服务询问要显示的项目。 （您选择的Javascript框架--jQuery，Prototype或其他 - 将对此有所帮助。）然后，您将DOM中的搜索结果项替换为Web服务返回的项。

这是一个高级概念视图。如果您想了解更多详情，请an article与您的需求非常接近。