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