Aquí encontraremos ejemplos de aplicación en los que se usarán propiedades de este objeto.
16.1 Ejemplos de aplicación
Trabajando con la propiedad disabled
Veremos el caso en que un usuario debe elegir un producto de una lista y la cantidad que desea comprar, de otra lista. Pero esto último, solo podrá hacerlo, si ya ha seleccionado un producto.
El Script...
<script languaje="javascript">
function habilitar(form)
{
if (form.productos[0].selected == true)
{
form.cantidad.disabled = true;
}
else
{
form.cantidad.disabled = false;
}
}
</script>
El formulario...
<form name="ejemplo1" method="POST" target="_blank" action="pagina.htm">
<select name="productos" onChange="habilitar(this.form)">
<option value="">[Seleccione un producto]</option>
<option value="COD 001">COD 001: Producto 1</option>
<option value="COD 002">COD 002: Producto 2</option>
<option value="COD 003">COD 003: Producto 3</option>
</select>
<select name="cantidad" disabled>
<option value="">[cantidad]</option>
<option value="5">5 unidades</option>
<option value="10">10 unidades</option>
<option value="15">15 unidades</option>
</select>
<input type="submit" value="Enviar"></form>
Los resultados...
Trabajando con el constructor new Option
Mediante este ejemplo, se generarán distintas opciones en la segunda lista dependiendo de la opción elegida en la primera.
El Script...
<script language="javascript">
function agregarOpciones(form)
{
var selec = form.tipos.options;
var combo = form.estilo.options;
combo.length = null;
if (selec[0].selected == true)
{
var seleccionar = new Option("<-- esperando
selección","","","");
combo[0] = seleccionar;
}
if (selec[1].selected == true)
{
var popular1 = new Option("Rock de los 90","Rock1","","");
var popular2 = new Option("Rock de los 80","Rock2","","");
combo[0] = popular1;
combo[1] = popular2;
}
if (selec[2].selected == true)
{
var academica1 = new Option("Musica del
Barroco","Barroco","","");
var academica2 = new Option("Musica del Siglo XX","Siglo XX","","");
var academica3 = new Option("Música del Romantisismo","Romantico","","");
combo[0] = academica1;
combo[1] = academica2;
combo[2] = academica3;
}
}
</script>
El formulario...
<form name="ejemplo2" method="POST" target="_blank" action="pagina.htm">
<select name="tipos" onChange="agregarOpciones(this.form)">
<option value="">[seleccione una opción]</option>
<option value="musicapopular">Música Popular (Rock)</option>
<option value="musicaacademica">Música Académica</option>
</select>
<select name="estilo">
<option value=""><-- esperando selección</option>
</select>
<input type="submit" value="Enviar"></form>
Los resultados...
Validar un select
Como en los dos ejemplos anteriores, vimos que existen opciones que tienen un valor nulo (value=""). Se supone que ese tipo de opciones, no debe ser enviada en un formulario, ya que no tienen ese valor. Este ejemplo, verificará que la opción elegida, sea una opción válida.
El script...
<script languaje="javascript">
function validar(form)
{
if (form.combo1.options[form.combo1.selectedIndex].value == "")
{
alert("Por favor, seleccione una opción válida");
form.combo1.focus(); return true;
}
form.submit();
}
</script>
El formulario...
<form name="ejemplo3" method="POST" target="_blank" action="pagina.htm">
<select name="combo1">
<option value=" ">[seleccione una opción]</option>
<option value="opcion1">Opción 1</option>
<option value="opcion2">Opción 2</option>
<option value="opcion3">Opción 3</option>
</select>
<input type="button" value="Enviar" onClick="validar(this.form)">
</form>
Los resultados...
Modificar la propiedad text de un option
Por algún motivo, puede resultar interesante modificar el texto de un option. Aquí veremos un ejemplo de como hacerlo.
El Script...
<script languaje="javascript">
function modificarTexto(form)
{
var selec = form.opciones.options;
if (select[0].selected == true)
{ selec[0].text = "Esta no es una opción válida"; form.opciones.focus(); }
else {
select[form.opciones.selectedIndex].text = "Presione el botón enviar"; }
}
</script>
El formulario...
<form name="ejemplo4" method="POST" target="_blank" action="pagina.htm">
<select name="opciones" onChange="modificarTexto(this.form)">
<option value=" ">[seleccione una opción]</option>
<option value="opcion1">Opción 1</option>
<option value="opcion2">Opción 2</option>
<option value="opcion3">Opción 3</option>
</select>
<input type="submit" value="Enviar">
</form>
Los resultados...
Eugenia Bahit
Analista Programadora LAMP y Scrum Coach