下拉菜單使用Javascript OnChange對MySQL查詢進行排序？

以下是我的預覽。我想要做的是，當有人將下拉改爲「Cooper」，然後只有Cooper品牌的輪胎將顯示，它將不得不更新我的MySQL查詢。如果他們將其更改回「所有輪胎品牌」，那麼它會快速刷新並顯示其中的每一個。下拉菜單使用Javascript OnChange對MySQL查詢進行排序？

是這樣的可能嗎？如果有人能指引我在正確的方向，我會非常感激。

謝謝！

enter image description here

來源

2011-09-27 Drew

如果您從數據庫第一視圖加載*所有品牌*（可能是所有記錄），爲什麼在過去的時間裏混淆SQL。只需隱藏/顯示您想要「過濾」的行。這將最終減少您所做的數據庫呼叫總數，並應提高性能。 – rlemon

這也可以，我只是尋找最好的方式。如果我這樣做，那麼我的分頁會陷入底部？ – Drew

不一定。只需編寫分頁以顯示隱藏適用的行。我希望我有一個工作的例子，我在一張客戶端軟件的小桌子上這樣做。如果你希望我能幫助你。 – rlemon

$("#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」）。顯示（）/。隱藏（）來。

至於默認選擇..你可以（使用你的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");

希望這有助於！

來源

2011-09-27 14:52:18 rlemon

是否有可能沒有單獨的頁面，serverSide.php？當我的MySQL查詢位於自己的頁面上時，我總是遇到問題。 – Drew

其實我搞定了！哇謝謝一堆。有沒有辦法在等待時顯示AJAX加載器？這需要幾秒鐘，我只想讓他們知道它即將到來。 – Drew

是的，只是一個裝載機，然後唯一的另一件事是，當我第一次去頁面它不加載任何東西..我必須選擇一個下拉，然後選擇「所有輪胎品牌」來查看它們。 – Drew

當然，這是可能的。

您需要爲彈出窗口指定一個javascript事件偵聽器。當訪問者從彈出窗口中選擇一個項目時，您可以使用AJAX調用向服務器上的Web服務請求顯示哪些項目。（您選擇的Javascript框架 - jQuery，Prototype或其他 - 將會對此有所幫助。）然後，您將DOM中的搜索結果項目替換爲Web服務返回的項目。

這是一個高層次的概念視圖。如果你想了解更多細節，這裏的an article非常接近你所需要的。

來源

2011-09-27 13:08:00

下拉菜單使用Javascript OnChange對MySQL查詢進行排序？

回答

相關問題