Publicado em 28 de jul.

Somar valores de vários options

Pessoal estou fazendo uma pagina de "monte seu pc".

Tenho os select options onde escolhe as partes do computador para ir montando, então para cada opção escolhida fica numa div a descrição e o valor do item.

Por exemplo :

No primeiro select option são os monitores, logo escolho um monitor, e o que escolhi ja fica numa div a descrição e o valor.*

No segundo select option tenho as CPUs, logo escolho uma cpu, e o que escolho ja fica em outra div a descrição e o valor. *

* Para ficar nas referidas divs as informações que escolhi tenho um script que pega a id do option e faz uma busca no banco trazendo todas as informações desse produto.

O problema é como que faço essa somatória dos valores dos itens escolhidos nos options se os options values estão ocupados com os ids?

Ou fazer a somatória das divs que tem o valor escolhido?

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

gabrieldarezzo· 29 de jul.

Eu tentaria algo relacionado ao atributo 'data'

Você vai precisar adaptar o seu código que 'gera' o HTML, adicionando o valor a cada option.

Ex, onde está assim:

<select name="memoria" id="memoria">
	<?php foreach($memorias as $memoria): ?>
 <option value="<?php echo $memoria['id'];?>"><?php echo $memoria['descricao'];?></option>
	<?php endforeach;?>
</select>

Você adiciona o atritubo 'data-price':

<select name="memoria" id="memoria">
	<?php foreach($memorias as $memoria): ?>
 <option value="<?php echo $memoria['id'];?>" data-preco="<?php echo $memoria['valor'];?>"><?php echo $memoria['descricao'];?></option>
	<?php endforeach;?>
</select>

<!DOCTYPE HTML>

<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

	<h1>Monte seu PC</h1>

	<h3>Memoria RAM</h3>
	<select name="memoria" id="memoria">
 <option value="1" data-preco="50.50">500MB</option>
 <option value="2" data-preco="100.25">2GB</option>
 <option value="3" data-preco="200.30">5GB</option>
	</select>

	<h3>Processador</h3>
	<select name="processador" id="processador">
 <option value="1" data-preco="300.00">i3</option>
 <option value="2" data-preco="500.00">i5</option>
 <option value="3" data-preco="800.70">i7</option>
	</select>

	<hr />

	<button id="btn-calc">Calcular</button>

	<script type="text/javascript">

 document.getElementById('btn-calc').addEventListener('click', function() {
 var memoria = document.getElementById('memoria');
 var selected = memoria.selectedIndex;
 var memoriaPreco = memoria[selected].dataset.preco;

 var processador = document.getElementById('processador');
 var selected = processador.selectedIndex;
 var processadorPreco = processador[selected].dataset.preco;

 var subtotal = parseFloat(memoriaPreco) + parseFloat(processadorPreco);

 alert(subtotal);

 });
	</script>
</body>
</html>

Ps:

Caso esteja utilizando jQuery é mais 'facil' ainda, da uma fuçada:
https://api.jquery.com/data/

joelzsbit· 6 de ago.

Gabriel obrigado,

Testei aqui e deu certo, como o meu option esta vindo do banco eu fiz assim:

<select name="memoria" id="memoria" class="span8">
 <option selected="selected" >Selecione...</option>
 while ($l = $busca_segura_menu->fetch(PDO::FETCH_ASSOC)) {
 echo '<option value="' . $l["id"] . '" data-preco="'. $l["valor"] .'"> ' . $l["nome"] .'</option>';
 }

</select>

Porém o valor no banco esta com virgula por exemplor "103,05", logo se eu exibir o valor ele exibe 103 como que faço para formatar e exibir 103,05?

gabrieldarezzo· 9 de ago.

http://www.w3schools.com/jsref/jsref_replace.asp