异步加载后修改标签默认值

<select id="type1" name="type1"></select>
<select id="type2" name="type2"></select>
<select id="type3" name="type3"></select>

有三个select标签,当启动网页后,异步请求后台,获取数据,拼接成option标签,插入select标签中
而且succeed方法里面有个递归调用

/// <summary>加载数据</summary>
/// <param name="type" type="">第几个列表</param>
/// <param name="pId" type="">选中项的值</param>
function CategoryLoad(type, pId) {
    $.ajax({
        type: "POST",
        url: "BookTypeList.ashx",
        data: {
            type: type,
            pId: pId
        },
        success: function (data) {
            data = $.parseJSON(data);
            $select = $("#type" + type);
            $select.empty();
            for (var i in data) {
                $select.append('<option value="' + data[i].TypeId + '">' + data[i].TypeTitle + '</option>');
                if (type < 3) {
                    CategoryLoad(type + 1, $select.val());
                }
            }
        },
    });
}

我意图写个方法在window.onload中给select设置默认值

function DefualtSelectionSet() {
    $("#type" + 1).val(temp[0]);
    $("#type" + 2).val(temp[1]);
    $("#type" + 3).val(temp[2]);
}
//temp也是从后台获取的数据,经过测试,能正常获取

然而DefualtSelectionSet总是在CategoryLoad执行完成前使用(因为异步)

我也曾想过在CategoryLoad最后面使用DefualtSelectionSet,但不幸的是,我在其他地方给select标签的change事件中使用了CategoryLoad.

我也曾试着把$.ajax的async设置为false,但是结果是select加载不完整,原因未知

请问如何解决

---

1）DefualtSelectionSet中的temp和CategoryLoad获取的参数有什么关系？
2）CategoryLoad你传入的pid值没有使用到，能用来设置默认值吗

---

我猜这个3个应该是省市县吧……撇开这个不谈，我猜lz需要的是promise

---

一次临时起意写的jQuery插件，可能唯一不满足你的要求的是，AJAX请求你的参数有两个，你自己看看调整下应该能用。

临时写的，也没设计过，就不要吐槽那组参数什么的了。。。

//简易级联选择器
!function ($) {
    "use strict";
    var LevelSelect = function (element, options) {
        this.$element = element;
        var DEFAULT = {
            urls : [],
            valueFields : [],
            textFields : [],
            firstValue : '',
            firstText : '不限',
            params : [],
            oneForAll : false
        };
        this.settings = $.extend({}, DEFAULT, options);
    };

    var initOptions = function (ele, url, param, value, text) {
        $.ajax({
            url : url,
            type : 'POST',
            data : param,
            success : function (data) {
                if(data && data.length > 0){
                    for(var i in data) {
                        var opt = '<option value="{1}">{2}</option>';
                        var item = data[i];
                        opt = opt.replace('{1}', item[value])
                            .replace('{2}', item[text]);
                        ele.append(opt);
                    }
                }
            }
        })
    };

    LevelSelect.prototype.init = function () {
        var _me = this;

        var length = _me.$element.length;
        if(length > _me.settings.urls.length
            || length > _me.settings.valueFields.length
            || length > _me.settings.textFields.length){
            throw Error('Please check param : urls, valueFields and textFields.');
        }
        _me.$element.each(function (index, ele) {
            var $ele       = $(ele),
                url        = _me.settings.urls[index],
                param      = _me.settings.params[index],
                value      = _me.settings.valueFields[index],
                text       = _me.settings.textFields[index],
                firstValue = _me.settings.firstValue,
                firstText  = _me.settings.firstText,
                hasNext    = (index + 1) <= length,
                next       = $(_me.$element.get(index + 1)),
                nextAll    = _me.$element.slice(index + 1);

            $ele.empty().append('<option value="' + firstValue + '">' + firstText +'</option>');

            if (index == 0){
                var p = {};
                p[param] = 0;
                initOptions($ele, url, p, value, text);
            }
            $ele.change(function () {
                nextAll.find('option:gt(0)').remove();
                var selected = $(this).val();
                if(selected == firstValue){
                    return;
                }
                if(hasNext){
                    var p = {};
                    p[param] = selected;
                    initOptions(next, url, p, value, text);
                }
            });
        });
        return _me;
    };

    $.fn.LevelSelect = function (options) {
        var levelSelect = new LevelSelect(this, options);
        return levelSelect.init();
    }
}(jQuery);

//使用
$('#type1, #type2, #type3').LevelSelect({
    urls : ['BookTypeList.ashx','BookTypeList.ashx','BookTypeList.ashx'],
    valueFields : ['TypeId', 'TypeId', 'TypeId'],
    textFields : ['TypeTitle', 'TypeTitle', 'TypeTitle'],
    params : ['pId', 'pId', 'pId']
});