title: Add two DropDownList to page on "Select" value in asp.net
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>Right now my booking.aspx page contains:</p>
  
  <pre><code>CheckIn (Asp:TextBox)
  CheckOut (Asp:TextBox)
  Rooms (Selected tag - Default value = 1)
  Adults (Asp:DropDownList)
  Children (Asp:DropDownList)
  </code></pre>
  
  <p>The default value in Rooms is 1, and if a user select 2 in the dropdownlist 
  two more Asp:DropDownList should come under. </p>
  
  <p>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.</p>
  
  <p>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.  </p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div class="contentbooking"&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;asp:Label ID="CheckinLabel" runat="server" Text="Check-in Date"&gt;&lt;/asp:Label&gt;
                      &lt;asp:TextBox ID="datetimepicker1" ClientIDMode="Static" runat="server" CssClass="form-control"&gt;&lt;/asp:TextBox&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;asp:Label ID="CheckoutLabel" runat="server" Text="Check-out Date"&gt;&lt;/asp:Label&gt;
                      &lt;asp:TextBox ID="datetimepicker2" ClientIDMode="Static" runat="server" CssClass="form-control"&gt;&lt;/asp:TextBox&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;asp:Label ID="RoomsLabel" runat="server" Text="Rooms:"&gt;&lt;/asp:Label&gt;
                      &lt;select class="form-control" id="rooms"&gt;
                          &lt;option&gt;1&lt;/option&gt;
                          &lt;option&gt;2&lt;/option&gt;
                          &lt;option&gt;3&lt;/option&gt;
                          &lt;option&gt;4&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="form-horizontal"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;div class="col-sm-6"&gt;
                              &lt;asp:Label ID="Label2" runat="server" Text="#1:"&gt;&lt;/asp:Label&gt;
                              &lt;br /&gt;
                              &lt;asp:Label ID="Label1" runat="server" Text="Adult:"&gt;&lt;/asp:Label&gt;
                              &lt;asp:DropDownList ID="adults" CssClass="form-control" runat="server"&gt;
                                  &lt;asp:ListItem&gt;2&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;1&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;3&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;4&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;5&lt;/asp:ListItem&gt;
                              &lt;/asp:DropDownList&gt;
                          &lt;/div&gt;
                          &lt;div class="col-sm-6"&gt;
                              &lt;br /&gt;
                              &lt;asp:Label ID="Label3" runat="server" Text="Children:"&gt;&lt;/asp:Label&gt;
                              &lt;asp:DropDownList ID="childrens" CssClass="form-control" runat="server"&gt;
                                  &lt;asp:ListItem&gt;0&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;1&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;2&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;3&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;4&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;5&lt;/asp:ListItem&gt;
                              &lt;/asp:DropDownList&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;!-- From group for two rooms --&gt;
                      &lt;div class="form-group"&gt;
                          &lt;div class="col-sm-6"&gt;
                              &lt;asp:Label ID="Label4" type="hidden" runat="server" Text="#2:"&gt;&lt;/asp:Label&gt;
                              &lt;br /&gt;
                              &lt;asp:DropDownList ID="adults2" type="hidden" ClientIDMode="static" CssClass="form-control" runat="server"&gt;
                                  &lt;asp:ListItem&gt;2&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;1&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;3&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;4&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;5&lt;/asp:ListItem&gt;
                              &lt;/asp:DropDownList&gt;
                          &lt;/div&gt;
                          &lt;div class="col-sm-6"&gt;
                              &lt;br /&gt;                                
                              &lt;asp:DropDownList ID="childrens2" type="hidden" ClientIDMode="static" CssClass="form-control" runat="server"&gt;
                                  &lt;asp:ListItem&gt;0&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;1&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;2&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;3&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;4&lt;/asp:ListItem&gt;
                                  &lt;asp:ListItem&gt;5&lt;/asp:ListItem&gt;
                              &lt;/asp:DropDownList&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;br /&gt;
                      &lt;asp:Button ID="Button7" runat="server" OnClick="checkForResevation" Text="Check Availability" CssClass="my-btn" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>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..</p>
  
  <p>Hope someone can take a look.</p>