Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

joelzsbit

Somar valores de vários options

Por , em Javascript

Recommended Posts

joelzsbit    1

joelzsbit
Postado

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

gabrieldarezzo    255

gabrieldarezzo
Postado

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

joelzsbit    1

joelzsbit
Postado

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
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito