El atributo selected en Javascript
Escrito por J.F. el Martes, 28 de Agosto del 2007 a las 12:57
El atributo selected en Javascript sirve para identificar cuando un elemento de un combo ha sido seleccionado. Ésto nos puede resultar tremendamente útil a la hora de realizar diferentes tipos de validaciones en formularios, y así habilitar o deshabilitar distintos elementos en función de la opción seleccionada en el combo. La forma génerica de identificar un objeto es la siguiente:
document.nombre_formulario.nombre_select[x].selected
Siendo x el número de opción, teniendo en cuenta que se comienza a contar desde 0.
Vamos a ver un sencillo ejemplo, en el cual si se selecciona la opción "Opción deshabilita" quedarán deshabilitados 2 campos de texto, y en caso contrario quedarán habilitadas las cajas de texto. Para ello recurriremos a una función que será llamada en el evento onChange, que comprobará al seleccionar una opción del combo si es "Opción deshabilita", y en caso de serlo dejará deshabilitadas las 2 cajas de texto. En caso contrario estarán habilitadas. Por defecto en el combo hemos dejado una opción en blanco, y en el botón Enviar llamaremos a una función mediante onClick que nos obligará a seleccionar una opción del combo, impidiendo que esté seleccionada la opción en blanco. Aquí tienes todo el código, que después de lo explicado, y teniendo algunas nociones básicas de Javascript no te costará entender:
-
-
function comprobar() {
-
if((document.formulario.menu[1].selected)) {
-
document.formulario.nombre.disabled=true;
-
document.formulario.apellido.disabled=true;
-
}
-
else {
-
document.formulario.nombre.disabled=false;
-
document.formulario.apellido.disabled=false;
-
}
-
}
-
function compruebaCombo() {
-
if((document.formulario.menu[0].selected)) {
-
alert("Debe elegir una opción del combo.");
-
}
-
}
-
</script>
-
</head>
-
-
-
<form name="formulario">
-
<select name="menu" onChange="comprobar();">
-
<option name="num1" value=""></option>
-
<option name="num2" value="1">Opcion deshabilita</option>
-
<option name="num3" value="2">Habilita</option>
-
<option name="num4" value="3">Habilita</option>
-
</select>
-
<label>Nombre:</label>
-
<input type="text" name="nombre">
-
<label>Apellido:</label>
-
<input type="text" name="apellido">
-
<input type="submit" value="Enviar" onClick="compruebaCombo()";>
-
</form>
-
</body>
-
-
</html>
Categoria: Javascript
- Añadir este post a
- Del.icio.us -
- Meneame -
- Digg -
- Webeame
Entradas relacionadas
Deja un comentario
