【问题标题】:calculate two values on fly with javascript / jquery使用 javascript / jquery 即时计算两个值
【发布时间】:2013-01-22 23:02:31
【问题描述】:

我有两个控件,文本框和下拉菜单,我想在单击 asp 按钮时计算这两个字段的总和。 这就是我所拥有的: 下拉值

<asp:DropDownList ID="DropDownList3" runat="server" CssClass="dropdown" Width="74px">
  <asp:ListItem Text="1" Value="1" />
  <asp:ListItem Text="4" Value="4" />
  <asp:ListItem Text="5" Value="5" />
  <asp:ListItem Text="9" Value="9" />
  <asp:ListItem Text="10" Value="10" />
  <asp:ListItem Text="11" Value="11" />
  <asp:ListItem Text="12" Value="12" />
  <asp:ListItem Text="13" Value="13" />
</asp:DropDownList>

文本框值

<asp:TextBox ID="TextBox9" runat="server" CssClass="input-mini" /><br />
<asp:Button ID="Button3" runat="server" Text="Calculate Sum" CssClass="btn btn-minibtn-info" />
Textbox Result <asp:TextBox ID="TextBox10" runat="server" CssClass="input-mini" />

我想点击按钮来计算下拉列表 + textbox9 的总和,然后将值放入 TextBox10。 知道如何实现吗?

【问题讨论】:

    标签: c# javascript jquery asp.net webforms


    【解决方案1】:

    注册到客户端点击:

    <asp:Button OnClientClick="return ButtonClick();" ... />
    

    JS:

    function ButtonClick() {
        var ddlVal = parseInt($('#<%=DropDownList3.ClientID%>').val());
        var tb9Val = parseInt($('#<%=TextBox9.ClientID%>').val());
        $('#<%=TextBox10.ClientID%>').val(ddlVal + tb9Val);
    
        return false;
    }
    

    【讨论】:

    • 您的示例中不需要 ClientID 属性吗?所以用 '#' 代替?
    • 另一件事,我认为您必须通过 parseInt 将字符串转换为整数,否则您只需连接值。
    • @A-Dubb 完全正确。我写了它并没有质量检查。感谢指正!
    • 没问题。我能做的任何事情都可以提供帮助。很好的答案。
    【解决方案2】:
    $(function() {
                $("#<%=Button3.ClientID%>").click(function() {
                var a = parseInt($('#<%=TextBox9.ClientID%>').val());
                var b = parseInt($('#<%=DropDownList3.ClientID%>').val());
                $('#<%=TextBox10.ClientID%>').val(a + b);
                });
            });
    

    【讨论】:

    • 您需要使用"#&lt;%=Button3.ClientID%&gt;"...等。查看其他答案。
    猜你喜欢
    • 1970-01-01
    • 2018-10-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-14
    • 1970-01-01
    • 1970-01-01
    • 2019-10-13
    相关资源
    最近更新 更多