[英]Issue in Hiding/Showing a panel on RadioButtonList using JQuery
1)我的页面上有一个下拉列表,其中包含选项“信用卡”和“发票/直接帐单”。在选择“发票/直接帐单”时,除了选择“信用卡”外,我什么都不需要:2)我必须显示/隐藏radiobuttonlist(在Panel:Panel2内部),它具有3个选项(签入日期,书本日期,其他日期)3)如果我单击radiobuttonlist的“其他日期”选项,我必须显示一个Textbox,它位于Panel:Panel3内部。 4)如果单击单选按钮列表的“签入日期”或“预订日期”选项,则必须隐藏Panel3内的文本框。
我所有的4个场景都在工作。 问题:如果我在下拉列表中选择“信用卡”,在单选按钮列表中选择“其他日期”选项,在文本框中输入值“ 10”,然后单击“提交”按钮,则发回邮件并将我的值存储在DB中。 重新加载页面时:下拉列表中显示“信用卡”,单选按钮列表中显示“信用卡”选项,但是值15的文本框不可见。当我选择“入住日期” /“预订日期”时,然后是“其他日期”,我将看到值为15的文本框。代码如下:
<script type="text/javascript">
$(function () {
$('select[id$=ddlCardType]').change(function () {
if (this.value == -1) {
$('div[id$=Panel1]').show();
$('div[id$=Panel2]').hide();
$('div[id$=Panel3]').hide();
}
else {
$('div[id$=Panel1]').hide();
$('div[id$=Panel2]').show();
}
}).change();
});
</script>
<script type="text/javascript">
$(document).ready(function () {
var panel = $("#Panel3");
var cbo = $("#Panel2").find("cboVisibility");
$("#cboVisibility").find('input:radio').change(function (index) {
//$("#Panel2 cboVisibility").find('input:radio').change(function (index) {
//$("[id*=pnl2 cboVisibility input:radio]").change(function (index) {
if ($(this).val() == "OD")
panel.show();
else
panel.hide()
});
$('#cboVisibility').find('input:radio').trigger('change');
});
</script>
<asp:DropDownList ID="ddlCardType" runat="server" CssClass="arial11nr" Width="270px">
<asp:ListItem Value="-1">Invoice/Direct Bill</asp:ListItem>
<asp:ListItem Value="SUCC">Credit Card</asp:ListItem>
</asp:DropDownList>
<td align="left" valign="top">
<asp:Panel ID="Panel1" runat="server" Style="display: none;">
<strong>Billing Instructions/Notes</strong><span class="red-color">(optional)
</span>
<asp:TextBox ID="txtBillingInstructions" runat="server" TextMode="MultiLine">
</asp:TextBox>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" Style="display: none;" ClientIDMode="Static">
<asp:RadioButtonList ID="cboVisibility" CssClass="Normal" runat="server"
RepeatDirection="Vertical"
ClientIDMode="Static">
<asp:ListItem Value="CD" Selected="True">Check-In Date</asp:ListItem>
<asp:ListItem Value="BD">Book Date</asp:ListItem>
<asp:ListItem Value="OD">Other Date</asp:ListItem>
</asp:RadioButtonList>
</asp:Panel>
<asp:Panel ID="Panel3" runat="server" Style="display: none;" ClientIDMode="Static">
<strong>Charge</strong>
<asp:TextBox ID="txtSUCCValidity" runat="server" ClientIDMode="Static"
Width="50px"></asp:TextBox>
<strong>Days Before Check-In</strong>
<asp:RangeValidator ID="RangeValidator1" runat="server"
ControlToValidate="txtSUCCValidity"
ErrorMessage="<br />Not valid Range" MaximumValue="999"
ValidationGroup="update"
MinimumValue="0" Type="Integer" Display="Dynamic"></asp:RangeValidator>
</asp:Panel>
</td>
帮助将不胜感激
您看到的行为很有道理。 默认情况下,panel2是隐藏的。 仅当单选按钮触发更改事件并且该更改也选择了第三个选项时,您的js代码才会显示面板。 在提交表单后加载页面时,单选按钮设置为文档准备就绪之前的第三个选项。 即,在可以订阅更改事件之前。 这就是为什么您默认情况下看不到文本框的原因。
要启用您的方案需要进行哪些更改,这取决于您如何设置单选按钮的值。
一种解决方案是在准备好文档时触发更改事件。 像这样
$(document).ready(function () {
var panel = $("#Panel2");
var cbo = $("#Panel1").find("cboVisibility");
$("#cboVisibility").find('input:radio').change(function (index) {
// when triggering a change across all radio inputs, even
// those that are not selected will show up here.
// hence the check to verify if they are actually selected.
if (this.value == "OD" && this.checked) {
panel.show();
// we wand to hide the panel3 only if an option other
// than "OD" is selected.
} else if (this.checked) {
panel.hide();
}
});
// this will trick the browser into thinking that you selected the third option
$('#cboVisibility').find('input:radio').trigger('change');
});
<script type="text/javascript">
var panel = $("#Panel3");
var cbo = $("#Panel2").find("cboVisibility");
$(document).ready(function () {
//var ddlCardType = "<%=ddlCardType.ClientID %>";
if ($('[id*=ddlCardType]>option:selected').val() == "SUCC" &&
$('[id*=cboVisibility] :checked').val() == "OD") {
panel.show();
}
});
$('select[id$=ddlCardType]').change(function () {
if (this.value == -1) {
$('div[id$=Panel1]').show();
$('div[id$=Panel2]').hide();
$('div[id$=Panel3]').hide();
}
else {
$('div[id$=Panel1]').hide();
$('div[id$=Panel2]').show();
if ($('[id*=cboVisibility] :checked').val() == "OD")
panel.show();
}
}).change();
$("#cboVisibility").find('input:radio').change(function (index) {
//$("#Panel2 cboVisibility").find('input:radio').change(function (index) {
//$("[id*=pnl2 cboVisibility input:radio]").change(function (index) {
if ($(this).val() == "OD")
panel.show();
else
panel.hide()
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.