I'm trying to create a booking page in asp like the one most hotels have. I can't seem to code/find the correct solution for this problem.

My problem is that a user can book from one to four rooms. If the user select, lets say 2 rooms, I have to make two more asp:DropDownList for adults / Children for the selected room. 

Right now my booking.aspx page contains:

```
CheckIn (Asp:TextBox)
CheckOut (Asp:TextBox)
Rooms (Selected tag - Default value = 1)
Adults (Asp:DropDownList)
Children (Asp:DropDownList)

```

The default value in Rooms is 1, and if a user select 2 in the dropdownlist 
two more Asp:DropDownList should come under. 

I have tried to implement the DropDownLists and set the Type="Hidden", but on page load, you can actually see the field before it gets hidden.

Have also tried with some JQuery the Hide(); method, but this did also not work, because you can also see it for a split second before it gets hidden. 

Code:

```
<div class="contentbooking">

                <div class="form-group">
                    <asp:Label ID="CheckinLabel" runat="server" Text="Check-in Date"></asp:Label>
                    <asp:TextBox ID="datetimepicker1" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
                </div>
                <div class="form-group">
                    <asp:Label ID="CheckoutLabel" runat="server" Text="Check-out Date"></asp:Label>
                    <asp:TextBox ID="datetimepicker2" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
                </div>

                <div class="form-group">
                    <asp:Label ID="RoomsLabel" runat="server" Text="Rooms:"></asp:Label>
                    <select class="form-control" id="rooms">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                </div>
                <div class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-6">
                            <asp:Label ID="Label2" runat="server" Text="#1:"></asp:Label>
                            <br />
                            <asp:Label ID="Label1" runat="server" Text="Adult:"></asp:Label>
                            <asp:DropDownList ID="adults" CssClass="form-control" runat="server">
                                <asp:ListItem>2</asp:ListItem>
                                <asp:ListItem>1</asp:ListItem>
                                <asp:ListItem>3</asp:ListItem>
                                <asp:ListItem>4</asp:ListItem>
                                <asp:ListItem>5</asp:ListItem>
                            </asp:DropDownList>
                        </div>
                        <div class="col-sm-6">
                            <br />
                            <asp:Label ID="Label3" runat="server" Text="Children:"></asp:Label>
                            <asp:DropDownList ID="childrens" CssClass="form-control" runat="server">
                                <asp:ListItem>0</asp:ListItem>
                                <asp:ListItem>1</asp:ListItem>
                                <asp:ListItem>2</asp:ListItem>
                                <asp:ListItem>3</asp:ListItem>
                                <asp:ListItem>4</asp:ListItem>
                                <asp:ListItem>5</asp:ListItem>
                            </asp:DropDownList>
                        </div>
                    </div>

                    <!-- From group for two rooms -->
                    <div class="form-group">
                        <div class="col-sm-6">
                            <asp:Label ID="Label4" type="hidden" runat="server" Text="#2:"></asp:Label>
                            <br />
                            <asp:DropDownList ID="adults2" type="hidden" ClientIDMode="static" CssClass="form-control" runat="server">
                                <asp:ListItem>2</asp:ListItem>
                                <asp:ListItem>1</asp:ListItem>
                                <asp:ListItem>3</asp:ListItem>
                                <asp:ListItem>4</asp:ListItem>
                                <asp:ListItem>5</asp:ListItem>
                            </asp:DropDownList>
                        </div>
                        <div class="col-sm-6">
                            <br />                                
                            <asp:DropDownList ID="childrens2" type="hidden" ClientIDMode="static" CssClass="form-control" runat="server">
                                <asp:ListItem>0</asp:ListItem>
                                <asp:ListItem>1</asp:ListItem>
                                <asp:ListItem>2</asp:ListItem>
                                <asp:ListItem>3</asp:ListItem>
                                <asp:ListItem>4</asp:ListItem>
                                <asp:ListItem>5</asp:ListItem>
                            </asp:DropDownList>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <br />
                    <asp:Button ID="Button7" runat="server" OnClick="checkForResevation" Text="Check Availability" CssClass="my-btn" />
                </div>
            </div>

```

Is there a way to make it hidden before page is loading so you can't see it, because then what i am doing could work..

Hope someone can take a look.