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

Posted 2023-02-19

【中文标题】在 4.0.3 js 中使用远程源时如何在 Select2 中设置值

【英文标题】：How to set value in Select2 when using remote source in 4.0.3 js

【发布时间】：2018-01-01 06:18:44

【问题描述】：

在我的应用程序中有一个场景，我们在控件中显示标签分隔值，因此我们选择 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 作为 id 和 ashish 作为文本'。我们想在编辑东西时从数据库中取回它

【参考方案1】：

请试试这个代码。

这里你需要以key和value的格式传递数据。

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

              ]
        );
    );

您也可以签入 select2 here

希望这会有所帮助。

【讨论】：

之后我的自动完成功能将无法正常工作

在select2中加载完所有数据后，需要再次绑定自动补全相关流程。

请建议它给出以下错误的语法：- Uncaught TypeError: $(...).select2 is not a function

你是对的，由于某种原因自动完成绑定不起作用。我的意思是在以数组格式 ajax 过程添加数据后的代码停止工作。