添加两个下拉列表到“选择”页面值
本文关键字:选择 下拉列表 两个 添加 | 更新日期: 2023-09-27 18:04:15
我试图在asp中创建一个预订页面,就像大多数酒店一样。我似乎找不到这个问题的正确解决方案。
我的问题是一个用户可以预订一到四个房间。如果用户选择,比如说2个房间,我必须为所选房间的成人/儿童创建两个asp:下拉列表。
现在是我的预订。Aspx页面包含:
CheckIn (Asp:TextBox)
CheckOut (Asp:TextBox)
Rooms (Selected tag - Default value = 1)
Adults (Asp:DropDownList)
Children (Asp:DropDownList)
Rooms的默认值是1,如果用户在下拉列表中选择2下面应该有两个Asp:DropDownList。
我试图实现下拉列表并设置Type="Hidden",但在页面加载时,您实际上可以在隐藏之前看到该字段。
也尝试了一些JQuery的Hide();方法,但这也不起作用,因为你也可以在它被隐藏之前看到它。
代码:<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>
是否有一种方法可以使它隐藏在页面加载之前,所以你不能看到它,因为然后我所做的可以工作…
希望有人能看一下。
我不知道如何准确地实现这一点,但是为什么不尝试使用razer sytax @if语句呢?
的详细信息可以在这里找到:http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx/
你可以尝试使用css与初始属性设置为display:none 2下拉列表,然后在你需要下拉列表是可见的时候,更新display:block.
protected void Page_Load(object sender, EventArgs e)
{
adults2.Visible = false;
childrens2.Visible = false;
}
你试过吗?
我找到了我正在寻找的东西,并想显示答案。在JavaScript/Jquery脚本中添加以下代码:
$(function () {
$('#<%=rooms.ClientID%>').on('change', function () {
$("#<%=adults2.ClientID%>,#<%=childrens2.ClientID%>,# <%=HiddenLabel2.ClientID%> ")[this.value == "2" ? "show" : "hide"]();
});
});
要让它工作…我需要在css文件中为Asp:DropDownLists添加display:none