Dropdownlist postback with jQuery or Javascript

Question

How to postback or clear the dropdownlist selection so it returns to the preset state using jQuery or Javascript? I need to clear the selection by clicking a p tag and calling toggle() method. My code is this:

<a class="a" id="aLinkID" href="javascript: void (0);" runat="server" onclick="">Clique
        aqui para exibir os horários disponíveis das salas </a>
    <br />
    <br />
    <asp:Panel ID="pnlSalas" runat="server" ClientIDMode="Static">
        <fieldset id="field">
            <legend>Horários Disponíveis</legend>
            <div>
                <asp:Label ID="lblSalas" Text="Salas: " runat="server"></asp:Label>
                <asp:DropDownList ID="ddlSalas" Width="120" DataTextField="ID" DataValueField="NOME_SALA"
                    runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlSalas_SelectedIndexChanged">
                </asp:DropDownList>
                <asp:GridView ID="gdvSalasDisponiveis" runat="server" AutoGenerateColumns="false"
                    CaptionAlign="left" CellPadding="4" CellSpacing="2" Font-Names="arial; tahoma"
                    Font-Size="small" EmptyDataText="" ForeColor="#333333" GridLines="none" HorizontalAlign="left">
                    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                    <Columns>
                        <asp:BoundField DataField="id_sala" HeaderText="id_sala" SortExpression="id_sala"
                            Visible="false">
                            <HeaderStyle Width="30px" HorizontalAlign="left" />
                        </asp:BoundField>
                        <asp:BoundField DataField="nome_sala" HeaderText="Sala" SortExpression="nome_sala"
                            ItemStyle-HorizontalAlign="Left">
                            <HeaderStyle Width="100px" HorizontalAlign="Left" />
                        </asp:BoundField>
                        <asp:TemplateField HeaderText="Data Início" HeaderStyle-HorizontalAlign="Center">
                            <ItemTemplate>
                                <%# Eval("data_inicio", "{0:dd/MM/yyyy}")%>
                                <%--   <%# DataBinder.Eval(Container.DataItem, "data_inicio", "{0:dd/MM/yyyy}")%>--%>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Data Fim" HeaderStyle-HorizontalAlign="Center">
                            <ItemTemplate>
                                <%# Eval("data_fim", "{0:dd/MM/yyyy}")%>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Horário Disponível" ItemStyle-HorizontalAlign="Center">
                            <ItemTemplate>
                                <asp:Label ID="lblHoras" runat="server" Text='<%# String.Format("{0} {1} {2}", Eval("HORA_INICIO"), " às ", Eval("HORA_FIM")) %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <EditRowStyle BackColor="#999999" />
                    <EmptyDataTemplate>
                    </EmptyDataTemplate>
                    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Center"
                        VerticalAlign="Middle" />
                    <HeaderStyle BackColor="#5D7B9D" Font-Bold="False" Font-Size="Small" ForeColor="White"
                        Height="30px" HorizontalAlign="Right" VerticalAlign="Middle" Wrap="True" />
                    <PagerSettings Position="TopAndBottom"></PagerSettings>
                    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="center" />
                    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                    <SortedAscendingCellStyle BackColor="#E9E7E2" />
                    <SortedAscendingHeaderStyle BackColor="#506C8C" />
                    <SortedDescendingCellStyle BackColor="#FFFDF8" />
                    <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
                </asp:GridView>
            </div>
        </fieldset>
    </asp:Panel>

   <script type="text/javascript">

    $(document).ready(function () {
        $('.a').click(function () {
            $("#pnlSalas").toggle();
        });
    });

</script>

Answer 1

I used your code on a test page and it’s clearing the value of Dropdownlist, after making the following changes:

• Place the parameter CliendIdMode="static" in the Dropdownlist ddlSalas:

<asp:DropDownList ID="ddlSalas" ClientIDMode="static" Width="120" 
     DataTextField="ID" DataValueField="NOME_SALA" runat="server" 
     AutoPostBack="true" OnSelectedIndexChanged="ddlSalas_SelectedIndexChanged">
</asp:DropDownList>

• Add the following line to the event click of the link:

 $("#ddlSalas").val($("#ddlSalas option:first").val());