无法在 Bootstrap 的 select2 插件中设置选定值

Posted 2023-05-07

【中文标题】无法在 Bootstrap 的 select2 插件中设置选定值

【英文标题】：Can't set selected value in select2 plugin in Bootstrap

【发布时间】：2014-08-12 14:32:57

【问题描述】：

我在我的网站上使用了一个 select2 插件。我无法在 select2 中设置选定的值。请在下面查看我的代码。

HTML

 <input id="drpEditProvider" class="form-control" type="text" value="" tabindex="8" name="ProviderId" data-required="true" />

脚本

  var attendeeUrl = '@Url.Action("GetProvider", "Admin")';
    var pageSize = 100;

    $('#drpEditProvider').select2(
    
        placeholder: 'Please Select Provider',
        //Does the user have to enter any data before sending the ajax request
        minimumInputLength: 0,
        allowClear: true,
    //tags:["red", "green", "blue"],
        ajax: 
            ////How long the user has to pause their typing before sending the next request
            //quietMillis: 150,
            //The url of the json service
            url: attendeeUrl,
            dataType: 'jsonp',
            //Our search term and what page we are on
            data: function (term, page) 
                return 
                    pageSize: pageSize,
                    pageNum: page,
                    searchTerm: term
                ;
            ,
            results: function (data, page) 
                //Used to determine whether or not there are more results available,
                //and if requests for more data should be sent in the infinite scrolling
                var more = (page * pageSize) < data.Total;
                return  results: data.Results, more: more ;
            
        ,
        initSelection: function (element, callback) 
            var data = [];
            $(element.val().split(",")).each(function () 
                data.push( id: this, text: this );
            );
            callback(data);
        ,
    );

控制器和模型

    public class Select2PagedResult
    
       public int Total  get; set; 
       public List<Select2Result> Results  get; set; 
    
    public class Select2Result
    
       public string id  get; set; 
       public string text  get; set; 
    
    public JsonResult GetProvider(string searchTerm, int pageSize, int pageNum)
    
        int Count = 0;

        List<Provider> provideres = ProviderHelper.GetAllProvider(searchTerm, out Count);

        //Translate the attendees into a format the select2 dropdown expects
        Select2PagedResult pagedProvider = new Select2PagedResult();

        pagedProvider.Results = new List<Select2Result>();

        //Loop through our attendees and translate it into a text value and an id for the select list
        foreach (Provider a in provideres)
        
            pagedProvider.Results.Add(new Select2Result  id = a.Id.ToString(), text = a.Name );
        
        //Set the total count of the results from the query.
        pagedProvider.Total = Count;

        //Return the data as a jsonp result
        return new JsonpResult
        
            Data = pagedProvider,
            JsonRequestBehavior = JsonRequestBehavior.AllowGet
        ;
    

【问题讨论】：

控制器和模型..?你在使用像 Angular 这样的 js 框架吗？如果是这样，请在问题中提及相同的内容或对其进行标记...

感谢您提供宝贵的信息。这个项目不使用像角度这样的框架。我在我的 web 应用程序中使用 jQuery 和 select2.js，这个项目使用 Normal mvc 4 with razor 和 bootstrap 模板。

【参考方案1】：

我终于找到了答案。您可以在select2 插件中设置选定的值，如下所示。

选择2单选

$("#drpselector").select2("data",  id: "1", text:"Test 1" );

选择 2 多选

 var arrdata = "1:Test 1,2:Test 2"   
 var thdprdata = [];
 $(arrdata.split(",")).each(function () 
 thdprdata.push( id: this.split(':')[0], text: this.split(':')[1] ););

 $("#drpselector").select2("data", thdprdata);

我在我的应用程序中使用此代码。对我来说效果很好。