Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Asociar un precio a cada opción de un select

JavaScript - Asociar un precio a cada opción de un select

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Asociar un precio a cada opción de un select

Publicado por Bryan (6 intervenciones) el 10/11/2016 21:48:16
hola tengo que realizar este problema y se me esta complicando bastante.. alguien sabe o me puede tirar una idea de como hacerlo?
tengo que colocar un select en un formulario que contenga las opciones: Coca Cola, Fanta y Sprite, asociar a cada opción los precios: 28.50 para Coca Cola, 26.25 para Fanta y 25.00 para Sprite. En un objeto Text ingresar la cantidad a comprar y en otro Text mostrar el importe a pagar de acuerdo a lo seleccionado en el Select.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil

Asociar un precio a cada opción de un select

Publicado por Martin (2 intervenciones) el 10/11/2016 22:20:06
Hola,

Usa esto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
	<head>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
		<!-- jQuery library -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 
		<!-- Latest compiled JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
		<meta charset="utf-8">
	</head>
	<body>
		<select id="selProducto">
			<option value="28.50">Cocacola</option>
			<option value="26.25">Fanta</option>
			<option value="25">Sprite</option>
		</select>
		<br/>
		Cantidad: <input type="number" id="txtCantidad" value="1" min="1">
		<br/>
		Importe: <input type="text" id="txtImporte" readonly>
		<br/>
		<button type="button" id="btnCalcular">Calcular</button>
 
		<script>
			$("#btnCalcular").click(function () {
				var precio = parseFloat($("#selProducto").val(), 10);
				var cantidad = parseFloat($("#txtCantidad").val(), 10);
				var importe = precio * cantidad;
 
				$("#txtImporte").val("$" + importe);
			});
		</script>
	</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Asociar un precio a cada opción de un select

Publicado por Bryan (6 intervenciones) el 11/11/2016 13:37:51
Muchisimas gracias.. la verdad me sirvio.. una consulta xq no lo entiendo muy bien.. para q son los link que estan en el Head?
serian estos..

1
2
3
4
5
6
7
8
9
10
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
<meta charset="utf-8">
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Asociar un precio a cada opción de un select

Publicado por Martin (2 intervenciones) el 11/11/2016 15:37:14
Para tener estilos boostrap y para la libreria jQuery, el de charset es para que el encoding de la pagina sea UTF8.
Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar