jquery - jquery to detect select finished loading

Question

How would you approach this question: I have 3 select (dropdown), one is person, one is State, one is city list.

When a state is selected, all city within that state will be loaded to city list

My problem when the person is changed, I can change the select (dropdown) with

$('#State').find('[value="' + user.State + '"]').prop('selected', true);

since state is pre-loaded. after that I had

$('#State').trigger('change');

to load the city list

My question is how do I detect $('#City') finished loading from ajax? Maybe something like this:

$('#City').on('load', function(){
   $('#City').find('[value="' + user.City+ '"]').prop('selected', true);
});

but I think I'm doing something wrong...

Any advise? thanks!

Here's the complete code:

$('document').ready(function ()
    {
        $('#State').live('change', function ()
        {
            GetCityList($(this).val());
        });

        // when loading, detect query string for user's name
        var user = GetUserInfo();

        if (user.Name != '')
        {
            $('#State').find('[value="' + user.State + '"]').prop('selected', true);
        }
        $('#State').trigger('change');

        // this line will not work because City has not finished loading
        $('#City').find('[value="' + user.City + '"]').prop('selected', true);
    });

    function GetCityList(State)
    {
        $.getJSON('/Handler.ashx?State=' + State, function (data)
        {
            var html = '';
            // process data to produce html
            $('#CityList').html(html);
        });
    }

Answer 1

好吧，对于那些和我有同样问题的人来说，这就是答案：

$('document').ready(function ()
{
    $('#State').live('change', function ()
    {
        GetCityList($(this).val());
    });

    // when loading, detect query string for user's name
    var user = GetUserInfo();

    if (user.Name != '')
    {
        $('#State').find('[value="' + user.State + '"]').prop('selected', true);
    }
    $('#State').trigger('change');

    // this listens to the custom event that you specified
    $('#CityList').on('loaded123',function()
    {
        $(this).find('[value="' + user.City + '"]').prop('selected', true);            
    });

});

function GetCityList(State)
{
    $.getJSON('/Handler.ashx?State=' + State, function (data)
    {
        var html = '';
        // process data to produce html
        $('#CityList').html(html);

        // trigger a custom event, any name you want
        $('#CityList').trigger('loaded123');
    });
}