jQuery等待select从数据库填充

时间:2013-10-31 17:12:53

标签: javascript jquery drop-down-menu

我有ddl(下拉列表),它在另一个ddl的更改事件之后从数据库填充但是我想在从数据库填充之后更改此ddl的值。

示例:

// This work very well
$("#ddlGroups").on('change',function(){
    // Load data from database and populate ddlUsers
    // response is loaded from database with $.ajax
    // Query Example: SELECT User_ID, Username FROM tblUsers WHERE Group_ID = [Group_ID] (Just for undrestanding the question)

    var Records = response.d;
    $("#ddlUsers").empty();
    $.each(Records, function(){
    var _Key = this.User_ID;
        _Value = this.Username;
        $("#ddlUsers").append($("<option />").val(_Key).text(_Value));
    });
});

// When button clicked then trigger ddlGroups change event and assign select option from ddlUsers
var _UserID = User_ID_From_Database; // Loaded from Database when button clicked
$("#ddlGroups").trigger('change'); // Users are loaded from database based on group ID
$("#ddlUsers").val(_UserID); // But this dosn't change

如何检查ddlUsers是否已加载,我尝试循环但它永远不会停止。

1 个答案:

答案 0 :(得分:0)

使用jquery将数据库中的ajax响应连接到事件或UI结果有两种主要方式(实际上是相同的底层)。第一个是承诺,第二个是回调。这两个都有100万个例子,jquery文档非常强大。

在你的情况下而不是“触发”,你回调调用正确的函数。以下只是展示的垃圾代码。

No:  $("#ddlGroups").tigger('change'); 

Yes:
//Your code 
$("#ddlGroups").on('change', updateDDL);

//I have just externalized this function to a scope/place where both the ajax and on change line of code can reference it.
function updateDDL(){

    var Records = response.d;
    $("#ddlUsers").empty();
    $.each(Records, function(){
    var _Key = this.User_ID;
        _Value = this.Username;
        $("#ddlUsers").append($("<option />").val(_Key).text(_Value));
    }
};

$.ajax(...., function (data) {
// Update ddl, the existing function you have.
// You should already have something like this.
updateDDL();  //Like this
});
BTW:您可以将数据传递到updateDDL,直接在updateDDL中使用$(this)来改进它等等,但这不是您的问题/问题的关键。您似乎不熟悉jquery及其使用的一些Javascript功能。花一点时间来了解它们,你将获得奖励。我将首先阅读围绕ajax / jquery的示例,然后观察如何更新DOM。