sumar <select> y mostrar el resultado

lrunge · #1 (**permalink**) 01/10/2015, 09:25

Buenas tardes,
Seguramente esto sea una pregunta tonta, pero de Javascript no se naaa!
Tengo dos campos select (bueno, dos o mas) cada uno de ellos tiene un valor numerico, lo que quiero es sumarlos y mostrar el resultado a medida que las selecciones dentro del select cambian

vamos, que si selecciono 1 en el primer select y 20 en el segundo, mostrar 21 como resultado

me echan una mano? y gracias de antemano

Alexis88 · #2 (**permalink**) 01/10/2015, 11:25

Tienes que ejecutar una función cada vez que se produzca el evento change en cualquiera de los combos. En ella, tomas los valores de ambos y los sumas.

Código Javascript:

Ver originalvar combo1 = document.querySelector("#id del combo1"),
    combo2 = document.querySelector("#id del combo2"),
    suma = function(){
        alert(parseInt(combo1.value) + parseInt(combo2.value)); //Muestra la suma
    };
 
combo1.addEventListener("change", suma, false);
combo2.addEventListener("change", suma, false);

Si los combos poseen como primera opción (por defecto) una que no posea un valor numérico, lo conveniente será que realices una validación.

Código Javascript:

Ver originalvar cmb1 = !isNaN(parseInt(combo1.value)) && isFinite(parseInt(combo1.value)) ? parseInt(combo1.value) : 0,
    cmb2 = !isNaN(parseInt(combo2.value)) && isFinite(parseInt(combo2.value)) ? parseInt(combo2.value) : 0;
 
alert(cmb1 + cmb2); //Muestra la suma

De esta manera, utilizando las funciones isNaN e isFinite, compruebas que los valores sean numéricos.

Un saludo.

jhonjaider1000 · #3 (**permalink**) 01/10/2015, 13:30

Hola colega, te dejo la solución completa a continuación, copia el código en un html o php y listo, solo pruebalo! espero que te sirva...

Código HTML:

<!DOCTYPE html>
<!--
@author: jhonjaider1000.
-->
<html>
    <head>
        <title>Solución</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        Selector: <select id="cmbx">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="30">30</option>            
        </select>
        <br/>
        <hr/>
        Sumatoria: <span style="padding: 5px 10px; background: #333; color: #FFF; border-radius: 3px;" id="sumatest">0</span>
        <hr/>
        <script type="text/javascript">
            //Se crea un evento para determinar cuando se haya cargado completamete el documento.
            document.addEventListener('DOMContentLoaded', function () {
                //Una vez cargado el documento, se crea la variable suma y se aplica
                //un evento al selector.
                var suma = 0;
                document.getElementById('cmbx').addEventListener('change', function () {
                    suma += parseInt(this.value);
                    document.getElementById('sumatest').innerHTML = suma;
                });
            });
        </script>
    </body>
</html>