JavaScript not working on ASP.Net DropDownList change inside UpdatePanel

Java script is not working on dropdownlist, below script is not working after using update panel

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Poltary.test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
        rel="stylesheet" type="text/css" />     
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".js-example-placeholder-single").select2({
                placeholder: "Select",
                allowClear: true
            });
        });
    </script> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div id="dvAccordian" style="width: 400px">
            <h3>
                Section 1</h3>
            <div>
                <p>
                    This is content of Section 1
                </p>
            </div>
            <h3>
                Section 2</h3>
            <div>
                <p>
                    This is content of Section 2
                </p>
            </div>
            <h3>
                Section 3</h3>
            <div>
                <p>
                    This is content of Section 3
                </p>
            </div>
        </div>
        <br />
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Tab 1</a></li>
                <li><a href="#tabs-2">Tab 2</a></li>
                <li><a href="#tabs-3">Tab 3</a></li>
            </ul>
            <div id="tabs-1">
                Content 1
            </div>
            <div id="tabs-2">
                Content 2
            </div>
            <div id="tabs-3">
                Content 3
            </div>
        </div>
        <asp:DropDownList ID="ddlpurchase" runat="server" AutoPostBack="true" cssclass="form-control js-example-placeholder-single" Height="85px" OnSelectedIndexChanged="ddlpurchase_SelectedIndexChanged" ToolTip="Select " Width="280px">
        </asp:DropDownList>
        <br />
        <asp:Button ID="btnRefresh" runat="server" Text="Refresh" />
    </ContentTemplate>
</asp:UpdatePanel>
</asp:Content>