Bootstrap select loses style after autopostback

Question

I'm using bootstrap within my Asp.net webforms site. My dropdownlists are styled with the bootstrap select.

This dropdownlist is within an Updatepanel. It's set to Autopostback to save the selection in my database. This save is working fine. The problem is that after this Updatepanel fires (or even another one I have on the same page), the dropdownlist loses the bootstrap select style and become a regular dropdown.

<asp:UpdatePanel ID="UpdatePanelSupervisor1" runat="server">
    <ContentTemplate>
        <asp:DropDownList ID="ddlSupervisor1" runat="server" CSSClass="form-control select show-tick" data-live-search="true" AutoPostBack="True" onselectedindexchanged="ddlSupervisor1_SelectedIndexChanged"/>                                  
    </ContentTemplate>

    <Triggers>
        <asp:AsyncPostBackTrigger ControlID ="ddlSupervisor1" EventName ="SelectedIndexChanged" />
    </Triggers>

</asp:UpdatePanel>

How can I keep the dropdownlist styled with bootstrap select after an updatepanel fires?

Answer 1

Handle the pageLoad event in head section and set the class using jquery,

<script type="text/javascript">
    function pageLoad() {
         $("#<% =ddlSupervisor1.ClientID %>").addClass("form-control select show-tick");
    }
</script>