在4.0.3 js中使用远程源时如何在Select2中设置值

时间:2017-07-26 05:38:06

标签: jquery css ajax model-view-controller jquery-select2

在我的应用程序中有一个场景,我们在控件中显示标签saparated值,所以我们选择select.2。

  <select id="ddlGulfEmployee" multiple="multiple" style="display: none; 
 width: 
 100%;" class="form-control"></select>

 </script>`$("#ddlGulfEmployee").select2({
    ajax: {
        url: '@System.Web.VirtualPathUtility.ToAbsolute("~/Home/GetMasterUser")',// '@Url.Action("GetMasterUser","Home") %>', //"../GetMasterUser",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            debugger;
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data) {
            debugger;
            var arr = []
            $.each(data, function (index, value) {
                //debugger;
                arr.push({
                    id: value.ID,
                    text: value.FirstName
                })
            })
            return {
                results: arr
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
    minimumInputLength: 1,
    templateResult: function (people) {
        debugger;
        //debugger;
        if (people.loading)
            return people.text;

        var markup = '<option value="' + people.id + '">' + people.text + '</option>';

        return markup;
    },
    templateSelection: function (people) {
        debugger;
        return people.value || people.text
    }
    //,
    //initSelection: function (element, callback) {
    //    debugger;
    //    callback($.map(element.val().split(','), function (id) {
    //        return { id: id, text: id };
    //    }));
    //}
});
$("document").ready(function () {//I WANT LIKE THIS OPTION 
    //1 russell 
    $('#ddlGulfEmployee').select2('val', ["test1", "test2"], true);

});

`

当我们保存数据并从远程源获取其工作正常但问题是我们想要在编辑期间显示已保存的值以控制页面加载。

请帮帮我。

谢谢和问候

1 个答案:

答案 0 :(得分:0)

请尝试此代码。

在这里,您需要以键和值的格式传递数据。

$("document").ready(function () {
        $("#ddlGulfEmployee").select2({
               data: [
                {
                  id: '1',
                  text: 'option 1'
                },
                {
                  id: '2',
                  text: 'option 2'
                },
                {
                  id: '3',
                  text: 'option 3'
                }

              ]
        });
    });

您也可以登记select2 here

希望这有帮助。