Skip to main content
Commonmark migration
Fonte Link

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

##Com JavaScript puro##

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

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"/>

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"/>

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"/>

adicionou 16 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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 3<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 3<4</option>
</select>
<input type="text" name="valor" id="valor"/>

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){
         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 3</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]){
         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 3</option>
</select>
<input type="text" name="valor" id="valor"/>

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"/>

removeu 3 caracteres do conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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", function(e)=>{
      let total = 0;
      for(let x of thise.target){
         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 3</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]){
         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 3</option>
</select>
<input type="text" name="valor" id="valor"/>

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", function(){
      let total = 0;
      for(let x of this){
         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 3</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]){
         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 3</option>
</select>
<input type="text" name="valor" id="valor"/>

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){
         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 3</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]){
         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 3</option>
</select>
<input type="text" name="valor" id="valor"/>

Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128
Carregando