Etiqueta SELECT en JavaScript
La etiqueta SELECT es gestionada en el lenguaje HTML que ayuda a tener una respuesta posible entre varias. Dentro de Javascript se maneja por medio del atributo name(html) como en forma de arbol mediante una dirección horizontal Ejemplo.
document . nombre formulario . nombre del input o select . value ó text.
Para ejecutar la funcionalidad de ello se puede hacer mediante el atributo onchange(javascript) ó onclick(javascript), dependiendo de lo que se quiera emplear, con estos ejercicios se tendrá la idea de lo que conlleva estas etiquetas, atributos y funciones.
Ejercicio No.1
Generar un presupuesto de un equipo de computación a partir de tres objetos de tipo SELECT que nos permiten seleccionar:
Procesador (Pentium III - $400, Pentium IV $500).
Monitor (Samsung 14' - $250, Samsung 15' - $350, Samsung 17' - $550)
Disco Duro(80 Gb - $300, 240 Gb - $440, 800 Gb - $500)
Para cada característica indicamos string a mostrar (Ej. Pentium III) y el valor asociado a dicho string (Ej. 400).
Al presionar un botón "Calcular" mostrar el presupuesto en un objeto de tipo TEXT.
<html>
<head>
</head>
<body>
<script language="javascript">
function Procesador()
{
document.articulos.textprocesador.value =
document.articulos.procesador.value;
}
function Monitor()
{
document.articulos.textmonitor.value =
document.articulos.monitor.value;
}
function DiscoDuro()
{
document.articulos.textdiscoduro.value =
document.articulos.discoduro.value;
}
function Calcular()
{
document.articulos.resultado.value =
parseInt(document.articulos.textprocesador.value) +
parseInt(document.articulos.textmonitor.value) +
parseInt(document.articulos.textdiscoduro.value);
}
</script>
<form name="articulos">
<h1>Articulos</h1>
<h2>Procesador</h2>
<select name="procesador" onchange="Procesador()">
<option value="">Seleccione...</option>
<option value="400">Pentium III</option>
<option value="500">Pentium IV</option>
</select>
<input type="text" name="textprocesador">
<h2>Monitor</h2>
<select name="monitor" onchange="Monitor()">
<option value="">Seleccione...</option>
<option value="250">Samsung 14'</option>
<option value="350">Samsung 15'</option>
<option value="550">Samsung 17'</option>
</select>
<input type="text" name="textmonitor">
<h2>Disco Duro</h2>
<select name="discoduro" onchange="DiscoDuro()">
<option value="">Seleccione...</option>
<option value="300">80 Gb</option>
<option value="440">240 Gb</option>
<option value="500">800 Gb</option>
</select>
<input type="text" name="textdiscoduro">
<br>
<input type="button" value="Calcular" onclick="Calcular()"><br>
<input type="text" name="resultado">
</form>
</body>
</html>
Ejercicio No.2
Confeccionar una página que permita seleccionar una pizza y la cantidad de unidades. Luego al presionar un botón calcular el importe a pagar. Utilizar un objeto de la clase SELECT para la selección de la pizza, pudiendo ser:
Queso: $ 4.
Jamón y queso: $ 6.
Especial: $ 10.
A la cantidad de pizzas cargarla en un objeto de la clase TEXT y en otro objeto de la clase TEXT mostrar el importe total a abonar.
Respuesta:
<html>
<head>
</head>
<body>
<script language="javascript">
function Precio()
{
document.comida.precio.value =
document.comida.pizzas.value;
}
function Calcular()
{
document.comida.total.value =
document.comida.pizzas.value *
document.comida.cantidad.value;
}
</script>
<form name="comida">
<h1>Pizza</h1>
<select name="pizzas" onchange="Precio()">
<option value="">Seleccione...</option>
<option value=4>Queso</option>
<option value=6>Jamón y Queso</option>
<option value=10>Especial</option>
</select>
Precio: $<input type="text" name="precio"><br>
Cantidad: <input type="text" name="cantidad"><br>
<input type="button" value="Calcular" onclick="Calcular()"><br>
Total: $<input type="text" name="total"><br>
</form>
</body>
</html>
Ejercicio No.3
Confeccionar una página que permita tomar un examen múltiple choice. Se debe mostrar una pregunta y seguidamente un objeto SELECT con las respuestas posibles. Al presionar un botón mostrar la cantidad de respuestas correctas e incorrectas (Disponer 4 preguntas y sus respectivos controles SELECT).
<html>
<head>
</head>
<body>
<script language="javascript">
var r1, r2, r3, r4;
var a1, a2, a3, a4;
var Tcorrectas, Tincorrectas;
function Calcular()
{
r1=document.examen.respuesta1.value;
r2=document.examen.respuesta2.value;
r3=document.examen.respuesta3.value;
r4=document.examen.respuesta4.value;
if(r1==1)
a1=1;
else
a1=0;
if(r2==1)
a2=1;
else
a2=0;
if(r3==1)
a3=1;
else
a3=0;
if(r4==1)
a4=1;
else
a4=0;
Tcorrectas = a1 + a2 + a3 + a4;
Tincorrectas = 4 - Tcorrectas;
document.examen.total1.value=Tcorrectas;
document.examen.total2.value=Tincorrectas;
}
</script>
<form name="examen">
1. ¿De que color es la piña?<br>
<select name="respuesta1">
<option value="">Seleccione...</option>
<option value=1>Amarilla</option>
<option value=0>Morada</option>
</select><br>
2. ¿Cuantos dedos tenemos en la manos?<br>
<select name="respuesta2">
<option value="">Seleccione...</option>
<option value=1>5</option>
<option value=0>7</option>
</select><br>
3. ¿Que sexo es el hombre?<br>
<select name="respuesta3">
<option value="">Seleccione...</option>
<option value=1>masculino</option>
<option value=0>femenino</option>
</select><br>
4. ¿Cuantos ojos tiene un humano?<br>
<select name="respuesta4">
<option value="">Seleccione...</option>
<option value=1>2</option>
<option value=0>5</option>
</select><br>
<input type="button" value="Calcular" onclick="Calcular()"><br>
Correctas: <input type="text" name="total1"><br>
Incorrectas: <input type="text" name="total2"><br>
</form>
</body>
</html>
