Bootstrap-select2 ajax动态取值赋值

最近接手了一个bootstrap框架的项目，下拉列表采用的select2，对于select说好处是支持搜索、多选，但是取值、赋值就麻烦许多了。直接上代码

$('#id’).select2({
    dropdownParent: $("#parent"),
    width:200,
    allowClear: true,
    placeholder : "请选择",
    ajax: {
        type: 'POST',
        url: url,
        dataType: 'json',
        data: function (params) {
            return { page: params.page };
        },
        processResults: function (data, params) {
            return { results: data }
        },
        cache: true
    },
});

   

获取选中的值

id = $("#id ").select2("data")[0].id;

text = $("#id ").select2("data")[0].text;

赋值

方法如下，但是对于数据从ajax动态获取，是不起作用的，因为select2是在点击之后加载数据的，数据源是未知的

$("#id ").select2("val", ["xxx"]);

$("#id ").select2(["xxx"]).trigger("change");

解决方法

1.重新获取数据，再次请求

$.ajax({
    type: "POST",
    dataType: 'json',
    url: url，
    success: function (data) {
        $.each(data, function (index, item) {
            if (item.id ==code) {
                var option = new Option(item.text, item.id);
                $("#id ").append(option).trigger('change');
            }
        })
    }
});

2. 先加载数据源

$.ajax({
    dataType : 'json',
    type : 'post',
    url :url,
    success: function(data){
        $("#id").select2({
            placeholder : "请选择",
            dropdownParent : $("#parent"),
            allowClear : true,
            width : 200,
            data : data
        });    
    }
});