Использование JQuery для обработки выбора выпадающего списка

Question

Как использовать 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/

Answer 1

Вы можете попробовать это (проверьте значение attribute из select, изменила его, но есть и другие способы)

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

becom е

<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.

Answer 2

Проверьте обновление: http://jsfiddle.net/kHtHA/7/

var doCalculate = function() { 
     var selected = $('select[name="Calc"]:eq(0)').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"); 
     $("#calc_value").html(total); 
    }; 
    $('#Calculate').click(doCalculate); 
    $('select[name="Calc"]').change(doCalculate); 

Answer 3

Не 100% уверен, что вы хотите. Обновление скрипки: http://jsfiddle.net/kHtHA/14/.

$('#Calculate').on('click', function(e){ 
    var num1 = parseInt($('#num1').val()); 
    var num2 = parseInt($('#num2').val()); 

    if(isNaN(num1) || isNaN(num2)){ 
     return; 
    } 

    var operator = $('select[name=Calc]').val(); 
    var total; 
    switch(operator){ 
     case "add": 
      total = num1 + num2; 
      break; 
     case "subtract": 
      total = num1 - num2; 
      break; 
     case "multiply": 
      total = num1 * num2; 
     break; 
     case "divide": 
      total = num1/num2; 
      break; 
    } 

    $('#calc_value').html(total); 
}); 

$('#clear').on('click', function(e){ 
    $('#num1').val(""); 
    $('#num2').val(""); 
});