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

标签 c# jquery html twitter-bootstrap jquery-select2

我在我的网站上使用了一个 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);
        },
    });

Controller 和模型

    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
        };
    }

最佳答案

我终于找到了答案。您可以在 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);

我在我的应用程序中使用了这段代码。它对我来说很好。

关于c# - 无法在 Bootstrap 的 select2 插件中设置选定值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24350896/

相关文章:

javascript - 在滚动导航时开发具有扩展/收缩部分/栏的网站?

css - 图像背景超过线条

javascript - 为什么 .closest(selector) 返回多个值?

c# - 将字符串转换为日期 - C#

c# - 如何首先通过EF代码从存储过程中检索输出参数

c# - API Application Insights 良好使用实践

c# - 后台 worker 部分或全部更新 ProgressBar 然后炸弹爆炸

javascript - Bootstrap 4 标签输入 - 仅从预定义列表中添加标签

javascript - 如何使我的 <h5> 垂直适合父 div?

html - 如何使溢出: hidden really hide content?