[Solved] jQuery Select2 Plugin Error: Object doesn't support property or method select2

Hi

Please review below code

when run the page show error "Object doesn't support property or method 'select2'"

Please explan me to fix that error.

<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>
    <script type="text/javascript" src="../sys_asst/scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../sys_asst/scripts/jquery.blockUI.js"></script>
    <script type="text/javascript">
        $(function () {
            BlockUI("dvGrid");
            $.blockUI.defaults.css = {};
        });
        function BlockUI(elementID) {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(function () {
                $("#" + elementID).block({
                    message: '<div align = "center">' + '<img src="../sys_asst/sys_img/loader.gif"/></div>',
                    css: {},
                    overlayCSS: { backgroundColor: '#000000', opacity: 0.6, border: '3px solid #63B2EB' }
                });
            });
            prm.add_endRequest(function () {
                $("#" + elementID).unblock();
            });
        };
    </script>
    
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
            <div id="dvGrid">
                <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>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

thanking you

samsmuthu