javascript - 异步加载后修改标签默认值-PHP中文网问答

<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加载不完整,原因未知

请问如何解决

//简易级联选择器 !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'] });

全部回复(3)

巴扎黑2017-04-10 15:46:51 3楼

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

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