Select2 PlugIn所选值未更新为DropDownList

问题描述

使用Select2插件在下拉菜单中选择asp.net c＃加载的数据以选择使用ajax webmethod

CSS：用户select2版本Select2-4.0.13和bootstrap4

<link href="Styles/Select2-4.0.13/select2.min.css" rel="stylesheet" type="text/css" />
<link href="Styles/Select2-4.0.13/select2-bootstrap4.min.css" rel="stylesheet" type="text/css" />

ASPX：使用类js-data-example-ajax创建的下拉列表名称

<asp:DropDownList runat="server" ID="txtItemName" data-width="100%" CssClass="js-data-example-ajax input-sm w-100"
            AutopostBack="true" OnSelectedindexChanged="txtItemName_SelectedindexChanged">
    <asp:ListItem Selected="True"></asp:ListItem>
</asp:DropDownList>

JAVA SCRIPT：使用文档准备就绪部分中的ajax Web方法调用将数据加载到select2下拉列表中及其加载数据

<script type="text/javascript">
    $(document).ready(function () {
        $('.js-data-example-ajax').select2({
            ajax: {
                url: 'WebForm1.aspx/getsource',                type: "POST",                dataType: "json",                contentType: "application/json; charset=utf-8",                delay: 250,                data: function (params) {

                    var search = '';

                    if (params.term !== undefined) {
                        search = params.term;
                    }

                    return "{'q': '" + search + "'}";
                },                processResults: function (data) {
                    var items = JSON.parse(data.d).items

                    if (items == null) {
                        return null;
                    }

                    return {
                        results: items
                    };
                }
            },            placeholder: 'Search here'
        });
    });
</script>

背后的代码：创建了一个Web方法，用于使用select2将数据加载到下拉列表中的Web方法

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string getsource(string q)
{
    Select2ModelMain obj = new Select2ModelMain();
    obj.items = new List<SelectResult>();

    SelectResult objdata1 = new SelectResult(); objdata1.id = 1; objdata1.text = "INDIA"; obj.items.Add(objdata1);
    objdata1 = new SelectResult(); objdata1.id = 2; objdata1.text = "AMERICA"; obj.items.Add(objdata1);
    objdata1 = new SelectResult(); objdata1.id = 3; objdata1.text = "CHINA"; obj.items.Add(objdata1);
    objdata1 = new SelectResult(); objdata1.id = 4; objdata1.text = "SRILANKA"; obj.items.Add(objdata1);
    obj.pagination = new SelectPage();
    obj.pagination.more = "true";

    if (!(string.IsNullOrEmpty(q) || string.IsNullOrWhiteSpace(q)))
    {
        obj.items = obj.items.Where(x => x.text.ToLower().StartsWith(q.ToLower())).ToList();
    }
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    string test = serializer.Serialize(obj);
    return test;
}
public class Select2ModelMain
{
    public List<SelectResult> items { get; set; }
    public SelectPage pagination { get; set; }
}

public class SelectResult
{
    public int id { get; set; }
    public string text { get; set; }
    public string disabled { get; set; }
}

public class SelectPage
{
    public string more { get; set; }
}

最初，我们会收到类似这样的错误：

无效的回发或回调参数。事件验证已启用 使用

因此我们在@page部分中添加了“ enableEventValidation =“ false”“

<%@ Page Language="C#" AutoEventWireup="true" enableEventValidation="false" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

下一个：SelectedindexChanged事件没有触发

因此在下拉列表中添加了行<asp:ListItem Selected="True"></asp:ListItem>

但是select2不会将所选项目更新为下拉列表，我们在所选文本中得到了空字符串，而值字段则参考图像1

refer Image Output

selection

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）