可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Have a existing solution I have been asked to enhance with Select2 JQuery library.

Have an updatepanel with a save button. On that updatepanel is a ASP.NET DropDownList.

on document ready I issue

$('.dropdownspecificclass').select2();

When page first renders it looks as expected the DropDownList has that tags view that Select2 provides.

Click the save button and the save process is done async without a page refresh, but the Select2 dropdown list loses it Select2 styling and now just looks like a regular dropdown.

If I try to apply the Select2 class to the CssClass property of the control then a JavaScript error occurs on the client. "Uncaught query function not defined for Select2 selectControlName"

Thoughts?

回答1:

I had the same issue. Instead of giving the command in document.ready function, give it in pageLoad function. pageLoad function will get executed during partial post backs.

function pageLoad(sender, args) {
        $(".dropdownspecificclass").select2();
    }

回答2:

As per the design and documentation of select2 select html element doesn't need any special parsing (data is parsed from select's option tags), to limit the selector to only select elements(in above case "ASP.NET DropDownList" renders as select html element) I recommended below change

and

"Uncaught query function not defined for Select2" exception usually occurs for other than select element cases.

//Replace your selector by prefixing select as below and then give a try
$('select.dropdownspecificclass').select2();

回答3:

The problem is not the select2 .It seems to be a known issue and I think you will definitely get some help from here: Conflicts between ASP.NET AJAX UpdatePanels & jQuery functions.

There is a full explanation about jquery issues after triggering any ajax and also there are various suggested solution methods.

BUT if there is no problem with that above at all, you can try to reinitialize the .select2() to the .done() event of your async.

回答4:

example code, asp.net dropdownlist with select2 and bootstrap:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo_Select2.aspx.cs" Inherits="Demo_Select2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="Content/bootstrap-select.min.css" rel="stylesheet" />

<script src="Scripts/jquery-3.3.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-select.min.js"></script>


<script src="Scripts/select2.min.js"></script>
<link href="Content/css/select2.css" rel="stylesheet" />
<link href="Content/select2-bootstrap.css" rel="stylesheet" />

<meta name="viewport" content="width=device-width, initial-scale=1" />


<script type="text/javascript">
    function pageLoad() {
        $(".js-example-placeholder-single").select2({
            theme: "bootstrap",
            placeholder: "Select Item",
            allowClear: true
        });
    }
</script>
</head>
<body>
<form id="form2" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div class="container">

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:DropDownList ID="DropDownList1" runat="server" class="form-control" AutoPostBack="true">
                    <asp:ListItem></asp:ListItem>
                    <asp:ListItem>test b1</asp:ListItem>
                    <asp:ListItem>test b2</asp:ListItem>
                    <asp:ListItem>test b3</asp:ListItem>
                </asp:DropDownList>
            </ContentTemplate>
        </asp:UpdatePanel>

        <asp:DropDownList ID="DropDownList2" runat="server" class="form-control js-example-placeholder-single" AutoPostBack="true">
                    <asp:ListItem></asp:ListItem>
            <asp:ListItem>test c1</asp:ListItem>
            <asp:ListItem>test c2</asp:ListItem>
            <asp:ListItem>test c3</asp:ListItem>
        </asp:DropDownList>

        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <asp:DropDownList ID="DropDownList3" runat="server" class="form-control js-example-placeholder-single" AutoPostBack="true">
                    <asp:ListItem></asp:ListItem>
                    <asp:ListItem>test d1</asp:ListItem>
                    <asp:ListItem>test d2</asp:ListItem>
                    <asp:ListItem>test d3</asp:ListItem>
                </asp:DropDownList>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
</form>