Ir para conteúdo
Entre para seguir isso  
joelzsbit

Somar valores de vários options

Recommended Posts

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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:

Compartilhar este post


Link para o post
Compartilhar em outros sites

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Entre para seguir isso  

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.