Bootstrap modal closes when dropdownlist inside fi

I have a ASP.NET chart inside a Bootstrap modal.

Everything was working fine until I added a dropdown list inside, every time I select a new item in dropdown list the selected item changed event fires, and Boostrap modal closes, event if there is no code inside event.

Here is the modal bootstrap html:

<div class="modal fade" id="modalCantidadReservasMensuales" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">
                    Cantidad reservas mensuaCantidad reservas mensuales
                </h4>
            </div>
            <div class="modal-body">
                <asp:DropDownList ID="ddlAñoCantidadReservasMensuales" runat="server" OnSelectedIndexChanged="ddlAñoCantidadReservasMensuales_SelectedIndexChanged"
                    AutoPostBack="True">
                </asp:DropDownList>
                <asp:Chart ID="Chart2" runat="server" Width="441px">
                    <Series>
                        <asp:Series Name="test1">
                        </asp:Series>
                    </Series>
                    <ChartAreas>
                        <asp:ChartArea Name="ChartArea1">
                        </asp:ChartArea>
                    </ChartAreas>
                </asp:Chart>
            </div>
        </div>
    </div>
</div>

This is mainly because you have an autopostback proprty set to true in your control which will cause the whole page postback on selected index changed event.

to fix the issue you could place your body content inside an update panel.

<div class="modal fade" id="modalCantidadReservasMensuales" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">
                    Cantidad reservas mensuaCantidad reservas mensuales
                </h4>
            </div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="modal-body">
                            <asp:DropDownList ID="ddlAñoCantidadReservasMensuales" runat="server" OnSelectedIndexChanged="ddlAñoCantidadReservasMensuales_SelectedIndexChanged">
                            </asp:DropDownList>
                            <asp:Chart ID="Chart2" runat="server" Width="441px">
                                <Series>
                                    <asp:Series Name="test1">
                                    </asp:Series>
                                </Series>
                                <ChartAreas>
                                    <asp:ChartArea Name="ChartArea1">
                                    </asp:ChartArea>
                                </ChartAreas>
                            </asp:Chart>
                        </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
</div>

Code behind:

    protected void ddlAñoCantidadReservasMensuales_SelectedIndexChanged(object sender, EventArgs e)
    {
        //youre code here ...

        UpdatePanel1.Update();
    }