2

Tenho o seguinte select:

<select name="idservico[]" id="idservico">
<option data-valor="25,00" value="1">opção 1</option>
<option data-valor="20,00" value="1">opção 2</option>
</select>

Tenho o seguinte input:

<input type="text" name="valor" id="valor"/>

Tenho o seguinte script:

<script>
jQuery(document).ready(function () {
    jQuery('#idservico').change(function() {

jQuery('#valor').val((jQuery(this).find(':selected').data('valor')));
    });
});
</script>

Então vamos lá, quando seleciono um serviço ele envia o valor do serviço para o input, mas preciso que quando selecionar outro serviço — porque meu select é múltiplo — ele teria que somar o valor do primeiro selecionado com o segundo.

Alguém pode me ajudar? Conseguir fazer até selecionar e enviar o valor para o input, mas somar nada até agora. Grato.

1

4 Respostas 4

1

Uma forma de somar os valores do select mantendo o formato dos valores com vírgula nas options:

Com JavaScript puro

document.addEventListener("DOMContentLoaded",()=>{
   document.querySelector("#idservico").addEventListener("change",(e)=>{
      let total = 0;
      for(let x of e.target.options){
         let val = parseFloat(x.dataset.valor.replace(',','.'));
         total += x.selected ? val : 0;
      }
      document.querySelector("#valor").value = total.toFixed(2).replace('.',',');
   });
});
<select name="idservico[]" id="idservico" multiple>
  <option data-valor="25,00" value="1">opção 1</option>
  <option data-valor="20,00" value="1">opção 2</option>
  <option data-valor="10,50" value="1">opção 3</option>
  <option data-valor="1250,50" value="1">opção 4</option>
</select>
<input type="text" name="valor" id="valor"/>

Com jQuery

$(document).ready(function(){
   $("#idservico").on("change",function(){
      let total = 0;
      for(let x of $(this)[0].options){
         let val = parseFloat($(x).data("valor").replace(',','.'));
         total += $(x).is(":selected") ? val : 0;
      }
      $("#valor").val(total.toFixed(2).replace('.',','));
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="idservico[]" id="idservico" multiple>
  <option data-valor="25,00" value="1">opção 1</option>
  <option data-valor="20,00" value="1">opção 2</option>
  <option data-valor="10,50" value="1">opção 3</option>
  <option data-valor="1250,50" value="1">opção 4</option>
</select>
<input type="text" name="valor" id="valor"/>

0

Segue um exemplo:

$(document).ready(function () {
    $('#idservico').change(function() {
      var total = 0;
      $(this).find(':selected').each(function(i){
        total += parseFloat($(this).data('valor'));      
      });
      $('#valor').val(total.toFixed(2));
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="idservico[]" id="idservico" multiple>
  <option data-valor="25.50" value="1">opção 1</option>
  <option data-valor="20.00" value="1">opção 2</option>
  <option data-valor="20.00" value="1">opção 3</option>
  <option data-valor="20.00" value="1">opção 4</option>
</select>
Tenho o seguinte input:
<input type="text" name="valor" id="valor"/>
Tenho o seguinte ajax:

6
  • este ficou perfeito, só que esta arredondando os centavos exemplo 25.50 + 30,00 está ficando 55,00 Commented 8/01/2018 às 16:24
  • Você precisa substiuir as "," por "." pois é assim que o JavaScript reconhece decimais. Commented 8/01/2018 às 16:28
  • Correto, funcionou da forma que eu queria. Muito obrigado a todos. Boa tarde Commented 8/01/2018 às 16:34
  • Achei um outro problema, se o valor for 1.125,50 ele coloca o valor para 1.13 qual seria a forma correta de formatar? Commented 8/01/2018 às 16:39
  • Ou você adiciona os tratamentos para trabalhar com valores de moeda ou você utiliza o valor puro... no caso seria 1125.50 Commented 8/01/2018 às 16:41
0

Acontece que dessa forma você não está somando, está apenas pegando o valor do select e adicionando no input.

Segue um exemplo que pode auxiliar.

jQuery(document).ready(function() {
    jQuery('select[name="idservico[]"]').change(function() {

        let selects = jQuery("select[name=\"idservico[]\"]");
        let valorDoSelect = 0;
        
        /* Captura e soma o valor de todos os select */
        $(selects).map(function(i, e) {
          valorDoSelect += parseFloat( $(e).find(':selected').data('valor').toString().replace(",", ".") );
        });
    
        /* Exibe o valor */
        $('#valor').val( valorDoSelect )
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="idservico[]" id="idservico">
  <option data-valor="0" value="1">Selecione uma opção</option>
  <option data-valor="25,00" value="2">opção 1 (R$ 25,00)</option>
  <option data-valor="20,00" value="3">opção 2 (R$ 20,00)</option>
</select>

<select name="idservico[]" id="idservico2">
  <option data-valor="0" value="4">Selecione uma opção</option>
  <option data-valor="50,00" value="5">opção 3 (R$ 50,00)</option>
  <option data-valor="40,00" value="6">opção 4 (R$ 40,00)</option>
</select>


<input type="text" name="valor" id="valor" readonly />

ou ainda

jQuery(document).ready(function() {
    jQuery('select[name="idservico[]"]').change(function() {

        let selects = jQuery("select[name=\"idservico[]\"]");
        let total = 0;
        
        /* Percorre todos os select */
        $(selects).map(function(i, e) {
          let values = $(e).find(":selected");
        
          /* Percorre todos os valores selecionados */
          $(values).map(function(k, j) {
            total += parseFloat( $(j).data('valor').replace(",", ".") );
          });
        });
        
        $("#valor").val(total);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="idservico[]" id="idservico" multiple>
  <option data-valor="25,00" value="1">opção 1 (R$ 25,00)</option>
  <option data-valor="20,00" value="2">opção 2 (R$ 20,00)</option>
  <option data-valor="50,00" value="3">opção 3 (R$ 50,00)</option>
  <option data-valor="40,00" value="4">opção 4 (R$ 40,00)</option>
</select>

<select name="idservico[]" id="idservico" multiple>
  <option data-valor="1,00" value="1">opção 5 (R$ 1,00)</option>
  <option data-valor="2,00" value="2">opção 6 (R$ 2,00)</option>
  <option data-valor="3,00" value="3">opção 7 (R$ 3,00)</option>
  <option data-valor="4,00" value="4">opção 8 (R$ 4,00)</option>
</select>

<input type="text" name="valor" id="valor" readonly />

Quando você trabalha com moedas, evite utilizar vírgula (Ex: 25,00) para separar as casas decimais, utilize sempre pontos (Ex: 25.00).

2
  • Está somando o valor, mas se eu tirar um item da seleção ele soma também e não poderia. Commented 8/01/2018 às 15:58
  • @LucianoCoelhoPettersen alterei o código. Se possível dá uma olhada. Commented 9/01/2018 às 0:06
0

o select fornece um array assim vc te que somar membro a membro do array uma maneira simples seria assim:

$(document).ready(function(){
console.log("teste")
  $("select").change(function(){
    var soma = 0;
    $(this).find(":selected").each(function(id,element){
    console.log(element)
      soma = soma + parseFloat($(element).data("value"))
    })
    
    $("span").text(soma)
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="cars" multiple>
  <option data-value="50.00" value="1">Volvo</option>
  <option data-value="52.25" value="2">Saab</option>
  <option data-value="55.75" value="3">Opel</option>
  <option data-value="58.00" value="5">Audi</option>
</select>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

<p>soma = <span></span></p>

</form>

go aqui

2
  • Este esta somando o valeu e não a data que contém os valores Commented 8/01/2018 às 15:58
  • @LucianoCoelhoPettersen editei e coloquei para pegar o data
    – Ari Santos
    Commented 9/01/2018 às 12:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .