2

Amigos, Tengo 2 dropdownlist. Ambos los puedo sumar, tengo ya el código Jquery pero mi problema es que los tengo que seleccionar en orden para que se sumen, es decir primero el select de "tamaño" y después el de "Masa" y a la hora de seleccionar una opción no me suma si la cambio a otra, espero poder explicarme bien. Y bueno lo que necesito es que se sume independientemente del orden de los dropdown y que pueda cambiar la opción a otra y sumarse igual.

Script

$(document).ready(function(){
  $("#tamano").change(function(event){
    valor = this.value;
    precioTamano = $('option:selected', this).data('precio');
  });

  $("#masa").change(function(event){
    valor = this.value;
    precioMasa = $('option:selected', this).data('precio');
    cantidad = $("#cantidad").val();

    var sum = precioTamano + precioMasa;

    $("#total").val(sum);
  });

});

HTML

      <select class="browser-default custom-select" name="tamano" id="tamano">
        <option value="">Seleccione</option>
        @foreach ($tamanos as $tamano)
          <option value="{{ $tamano->id }}" data-precio="{{$tamano->precio}}">{{ $tamano->nombre }}</option>
        @endforeach
      </select>


      <select class="browser-default custom-select" name="tipoPan" id="masa">
        <option value="">Seleccione</option>
        @foreach ($tipoPan as $masa)
          <option value="{{ $masa->id }}" data-precio="{{ $masa->precio }}">{{ $masa->nombre }}</option>
        @endforeach
      </select>

<input class="form-control" type="text" name="total" id="total" readonly>

4 respuestas 4

1

Saludos te sugiero lo siguiente:

function calcularSuma(){
	
  tamano = $("#tamano option:selected").data('precio');
  if(tamano == '' || tamano == null){
  	alert('Seleccione el Tamaño.');
    return false;
  }
	
  masa = $("#masa option:selected").data('precio');
  if(masa == '' || masa == null){
  	alert('Seleccione la Masa.');
    return false;
  }
  
  total = tamano + masa;
  $("#total").val(total);
}//end function calcularSuma
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Tamaño:  <br>
<select class="browser-default custom-select" name="tamano" id="tamano" onchange="calcularSuma();">
  <option value="" selected disabled>Seleccione</option>
  <option value="1" data-precio="10">10</option>
  <option value="2" data-precio="20">20</option>
  <option value="3" data-precio="30">30</option>
</select><br>
Masa:  <br>
<select class="browser-default custom-select" name="tipoPan" id="masa" onchange="calcularSuma();">
  <option value=""  selected disabled>Seleccione</option>
  <option value="4" data-precio="40">40</option>
  <option value="5" data-precio="50">50</option>
  <option value="6" data-precio="60">60</option>
</select><br>
Total: <br>
<input type="text" name="total" id="total" placeholder="Total">

Lo primero que realizo es agregar el evento onchange en tus select ó dropdown en este evento invoco a una función calcularSuma.

dentro de esta función obtengo los valores respectivos de cada uno, ademas realizo una validación previa antes de sumar dichos valores mediante un if:

 if(tamano == '' || tamano == null){
    alert('Seleccione el Tamaño.');
    return false;
  }

y así con cada uno de los select para verificar que existan valores y posterior suma el resto seria sumar y agregar el valor total al input deseado.

Espero te sirva y suerte..!!

1
1

Te dejo un ejemplo funcional con jQuery. En el bloque de código encuentras la explicación comentada. Este código lo puedes adaptar al tuyo.

//Cuando se detecte algún cambio en el DOM
$(document).change(function(event){
  //Capturo el valor de precioTamano y precioMasa
  precioTamano = $('#tamano').val();
  precioMasa = $('#masa').val();
  //Compruebo si alguno de los dos está vacío
  if(precioTamano == "" || precioMasa == ""){
    //A la variable sum le asigno el valor 0
    var sum = 0;
  }else{
    //Si los dos ya tienen valor, hago la suma de los dos valores
    var sum = parseInt(precioTamano) + parseInt(precioMasa);
  }
  //Muestro la suma
  $('#total').val(sum);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="browser-default custom-select" name="tamano" id="tamano">
  <option value="">Seleccione</option>
  <option value="1" data-precio="1">tamaño1</option>
  <option value="2" data-precio="2">tamaño2</option>
</select>

<select class="browser-default custom-select" name="tipoPan" id="masa">
  <option value="">Seleccione</option>
  <option value="15" data-precio="15">masa 15</option>
  <option value="23" data-precio="23">masa 23</option>
</select>

<input class="form-control" type="text" name="total" id="total" readonly>

0

Para tu caso, lo que hice fue crear una función con la operacion q buscas. Esa función se llama por cada select que cambie, pero solo se ejecuta si estan los 2 valores seteados.

En tu código, solo se ejecutaba cuando cambiaba el segundo valor.

var precioMasa;
var precioTamano;
var valor;

$(document).ready(function(){
  $("#tamano").change(function(event){
    valor = this.value;
    precioTamano = $('option:selected', this).data('precio');
    sumar();
  });

  $("#masa").change(function(event){
    valor = this.value;
    precioMasa = $('option:selected', this).data('precio');
    cantidad = $("#cantidad").val();
    sumar();
  });

  function sumar(){
    if (precioTamano != null && precioMasa != null) {
      var sum = precioTamano + precioMasa;
      $("#total").val(sum);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="browser-default custom-select" name="tamano" id="tamano">
  <option value="">Seleccione</option>
  <option value="7" data-precio="7">Tamaño</option>
</select>


<select class="browser-default custom-select" name="tipoPan" id="masa">
  <option value="">Seleccione</option>
  <option value="12" data-precio="12">Valor Masa</option>
</select>

<input class="form-control" type="text" name="total" id="total" readonly>

0
0

Que pasaría en el caso que quisieras agregar un select más? Por ejemplo si además de la masa y el tamaño necesitas saber el grosor?

Me incline más por crear una función genérica que te serviría en ese caso

var total = 0;

function calculo (id) {  
  let input = $(`#${id} option:selected`).data('precio');
  total += input;
  $("#total").val(total);
}
<select class="browser-default custom-select" name="tamano" id="tamano" onchange="calculo('tamano');">
  <option value="">Seleccione</option>
  <option value="7" data-precio="7">Tamaño</option>
</select>

<select class="browser-default custom-select" name="tipoPan" id="masa" onchange="calculo('masa');">
  <option value="">Seleccione</option>
  <option value="12" data-precio="12">Valor Masa</option>
</select>

<!--<select class="browser-default custom-select" name="tipoPan" id="grosor" onchange="calculo('grosor');">
  <option value="">Seleccione</option>
  <option value="20" data-precio="20">Valor Grosor</option>
</select>-->

<input class="form-control" type="text" name="total" id="total" readonly>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Cree una función que recibe un id que corresponde a tu input select y la suma se realiza de forma automática, sin esperar que se llenen los demás campos.

Espero que te sea de utilidad

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.