[Solved] jQuery Select2 Plugin not working after partial Postback in ASP.Net Update Panel

Hi samsmuthu,

You need to reapply the select2 plugin after partial postback.

For width you need to set the dropdownAutoWidth to true.

Check this example. Now please take its reference and correct your code.

HTML

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
            <asp:DropDownList ID="ddlCustomers" runat="server" Width="150px" AutoPostBack="true"
                OnSelectedIndexChanged="ddlCustomers_SelectedIndexChanged">
                <asp:ListItem Text="--Select Customer--" Value="0" />
                <asp:ListItem Text="John Hammond " Value="1" />
                <asp:ListItem Text="Mudassar Khan" Value="2" />
                <asp:ListItem Text="Suzanne Mathews" Value="3" />
                <asp:ListItem Text="Robert Schidner" Value="4" />
                <asp:ListItem Text="Robert Schidner Suzanne Mathews" Value="4" />
            </asp:DropDownList>
            <br />
            <br />
            <asp:DropDownList ID="DropDownList1" runat="server">
                <asp:ListItem Text="--Select Customer--" Value="0" />
                <asp:ListItem Text="John Hammond" Value="1" />
                <asp:ListItem Text="Mudassar Khan" Value="2" />
                <asp:ListItem Text="Suzanne Mathews" Value="3" />
                <asp:ListItem Text="Robert Schidner" Value="4" />
            </asp:DropDownList>
            <script type="text/javascript">
                $(function () {
                    $("[id*=ddlCustomers]").select2({ dropdownAutoWidth: true });
                    $("[id*=DropDownList1]").select2({ dropdownAutoWidth: true });
                });

                //On UpdatePanel Refresh.
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                if (prm != null) {
                    prm.add_endRequest(function (sender, e) {
                        if (sender._postBackSettings.panelsToUpdate != null) {
                            $("[id*=ddlCustomers]").select2({ dropdownAutoWidth: true });
                            $("[id*=DropDownList1]").select2({ dropdownAutoWidth: true });
                        }
                    });
                };
            </script>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Code

C#

protected void ddlCustomers_SelectedIndexChanged(object sender, EventArgs e)
{

}

VB.Net

Protected Sub ddlCustomers_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
End Sub

Screenshot