0
我有这种形式，用户从下拉菜单中选择选项，并显示相应的div。然而，我的问题是点击提交按钮时，点击方法正在成功执行，但当前div被隐藏，并显示第一个div。我怎样才能阻止这种情况发生？按钮点击jQuery重置
jQuery代码：
$(document).ready(function() {
displayDiv();
$('#ddlist').change(displayDiv);
function displayDiv() {
switch ($("#ddlist").val()) {
case "addition":
$("#addition").show();
$('#conversion').hide();
$('#triangle').hide();
$('#quadratic').hide();
break;
case "conversion":
$("#addition").hide();
$('#conversion').show();
$('#triangle').hide();
$('#quadratic').hide();
break;
case "triangle":
$("#addition").hide();
$('#conversion').hide();
$('#triangle').show();
$('#quadratic').hide();
break;
case "quadratic":
$("#addition").hide();
$('#conversion').hide();
$('#triangle').hide();
$('#quadratic').show();
break;
}
}
});
表单代码：
Please choose required calculation from the following list:
<select id="ddlist">
<option value="addition">Addition of three numbers</option>
<option value="conversion">Convert from Fahrenheit to Celsius</option>
<option value="triangle">Calculate the side of a right-angled triangle</option>
<option value="quadratic">Find x using the Quadratic Equation</option>
</select><br /><br />
</p>
<div id="addition">
<p>
Input variable a : <asp:TextBox runat="server" ID="varA" CssClass="numeric"></asp:TextBox><br /><br />
Input variable c : <asp:TextBox runat="server" ID="varB" CssClass="numeric"></asp:TextBox><br /><br />
Input variable b : <asp:TextBox runat="server" ID="varC" CssClass="numeric"></asp:TextBox><br /><br />
<asp:Button ID="additionSubmit" runat="server" Text="Submit"
onclick="additionSubmit_Click" /><br /><br />
<asp:Label ID="lblAddition" runat="server" Text="" CssClass="label"></asp:Label>
</p>
</div>
<div id="conversion">
<p>
Input Fahrenheit Temperature : <asp:TextBox runat="server" ID="temperatureF" CssClass="numeric"></asp:TextBox><br /><br />
<asp:Button ID="converstionSubmit" runat="server" Text="Submit"
onclick="converstionSubmit_Click" /><br /><br />
<asp:Label ID="lblConversion" runat="server" Text="" CssClass="label"></asp:Label>
</p>
</div>
<div id="triangle">
<p>
Input side a : <asp:TextBox runat="server" ID="tsideA" CssClass="numeric"></asp:TextBox><br /><br />
Input side b : <asp:TextBox runat="server" ID="tsideB" CssClass="numeric"></asp:TextBox><br /><br />
<asp:Button ID="triangleSubmit" runat="server" Text="Submit"
onclick="triangleSubmit_Click" /><br /><br />
<asp:Label ID="lblTriangle" runat="server" Text="" CssClass="label"></asp:Label>
</p>
</div>
<div id="quadratic">
<p>
Input side a : <asp:TextBox runat="server" ID="sideA" CssClass="numeric"></asp:TextBox><br /><br />
Input side c : <asp:TextBox runat="server" ID="sideB" CssClass="numeric"></asp:TextBox><br /><br />
Input side b : <asp:TextBox runat="server" ID="sideC" CssClass="numeric"></asp:TextBox><br /><br />
<asp:Button ID="quadraticSubmit" runat="server" Text="Submit"
onclick="quadraticSubmit_Click" /><br /><br />
<asp:Label ID="lblQuadratic" runat="server" Text="" CssClass="label"></asp:Label>
</p>
</div>
上单击代码（仅此外，剩下的就是类似）：
protected void additionSubmit_Click(object sender, EventArgs e)
{
if (varA.Text != null && varB.Text != null && varC.Text != null)
{
int result = Convert.ToInt32(varA.Text) + Convert.ToInt32(varB.Text) + Convert.ToInt32(varC.Text);
lblAddition.Text = " a + b + c = " + result.ToString("#.##") + "\r (a+b+c)";
}
else
{
lblAddition.Text = "Please input all fields!";
}
}
努力实现上述与AJAX 。这是我到现在为止：
$("#btnSubmit").click(function() {
$.ajax({
$('#addition,#conversion,#triangle').hide(),
$('#quadratic').show();
});
});
无关的，你问什么，我可以建议你'displayDiv（）'函数可以减少到只有两行，如果你首先隐藏所有div $（“＃addition，＃conversion，＃triangle，＃quadratic”）。hide（）;'然后显示需要的$'（“＃”+ $（“＃ddlist”）.val（））.show（）;' – nnnnnn
会改变这一点，感谢提示 – user1986761