javascript - 使用JQuery处理下拉列表的选择

如何使用JQuery处理输入的选择来进行计算并显示结果。

<input type="text" id="num1"/>

<select name="Calc">
  <option value="add">ADD</option>
  <option value="subtract">SUBTRACT</option>
  <option value="multiply">MULTIPLY</option>
  <option value="divide">DIVIDE</option>
</select>

<input type="text" id="num2"/>

<button id="Calculate">CALCULATE</button>
<button id="clear">CLEAR</button>
Calculated Value:
<div class="valueDisp">
<div id="calc_value">
</div>
</div>

$('input[name=Calc]').ready(function () {
    var selected = $(this).val();
    var num1 = $('#num1').val();
    var num2 = $('#num2').val();
    if (selected == 'add') var total = +num1 + +num2;
    else if (selected == 'subtract') var total = num1 - num2;
    else if (selected == 'multiply') var total = num1 * num2;
    else if (selected == 'divide') var total = num1 / num2;
    else var total = ("Please select an option");
    $("#calculate").click(function () {});
    $("#clear").click(function () {
        $('.input').val("");
    });
    $("#calc_value").html(total);
});

我有以下内容：http://jsfiddle.net/kHtHA/5/

最佳答案

您可以尝试此操作（检查attribute的值select，将其更改，但是还有其他方法）

<option value="add">ADD</option>

成为

<option value="+">ADD</option> <!--and so on-->

JS：

$(document).ready(function () {
    $('#Calculate').click(function(){
        var operand = $('select[name=Calc]').val();
        var num1 = $('#num1').val();
        var num2 = $('#num2').val();
        if(num1.match(/\d/) && num2.match(/\d/)) {
            var total = eval(num1 + operand + num2);
            $("#calc_value").html(total);
        }
    });
});

DEMO.

关于javascript - 使用JQuery处理下拉列表的选择，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19393723/