Question

我有这段代码：

<div>
    <input id="number" type="text" />

    <select id="Selection" name="D1"> 
    <option>Plus 1</option>
    <option>Minus 1</option>
    </select>

    <input id="result" type="text" />
    </div>

如何根据使用jQuery从select控件中选择的值计算输入到“number”中的任何数字？例如，我想在输入“number”中输入5，如果我选择“Plus 1”，则在数字中加1，并在“result”输入中显示结果。如果我选择“减1”，那么我将做一个减法并显示新的结果。谢谢。

Answer 1

你可以这样做：

$('#Selection').change(calc); //update result when changing the number
$("#number").keyup(calc);     //update result when select changes

function calc() {
  $('#result').val(
    parseInt($('#number').val(), 10) + parseInt($("#Selection").val(), 10)
  );
}

Give it a try here，重要的部分是parseInt()您的输入（您还应该添加一个仅限数字的过滤器等）。否则来自任一输入的.val()是一个字符串，想一想就这样：

1 + 1 == 2
"1" + "1" = "11"

Answer 2

<div>
    <input id="number" type="text" />

    <select id="Selection" name="D1"> 
        <option value="1">Plus 1</option>
        <option value="-1">Minus 1</option>
    </select>

    <input id="result" type="text" />
</div>

$('#Selection').change(function() {
   $('#result').val(parseInt($('#number').val(),10) + parseInt($(this).val(),10));
})

编辑：是的，评论是正确的，我编辑了代码以反映

Answer 3

<option value="minus">
<option value="plus">

如果元素的.val()为'减'，那么执行x，如果它的加号为y，等等。

Answer 4

如果您想支持的不仅仅是加法和减法，那么如果您对数据进入eval()的方式非常谨慎，则可以#number进行支持：

<input id="number" />
<select id="Selection">
    <option value="+1">Plus 1</option>
    <option value="-1">Minus 1</option>
    <option value="*2">Times 2</option>
</select>
<input id="result"/>
<input type="button" onclick="$('#result').val(  eval($('#number').val() + $('#Selection').val()); );" value="Calculate" />

不要让URL或FORM数据作为数字的默认值提供，否则您已将自己打开到跨站点脚本漏洞（XSS）。

jquery计算问题

4 个答案: