Combo editable
Escrito por J.F. el Viernes, 6 de Julio del 2007 a las 16:07
El código de hoy va a resultar interesante a mucha gente, y explica como realizar un combo editable. Es un sistema ideal para que escojamos unas cuantas opciones que serán mostradas en el combo, y podamos añadir al final una opción llamado Otro, que si la seleccionamos hará que el combo se convierta en una caja normal en la que podemos ingresar el texto deseado, para luego retornar al combo con la opción introducida añadida al combo como nuevo elemento. Veamos pues como sería posible, con el código indispensable para que funcione:
En primer lugar, deberemos incluir una serie de ficheros CSS y Javascript, para que funcione el combo editable. Como viene siendo habitual, lo haremos en el head.
También deberemos declarar la función initialize, en la que definiremos el número de combos editables a utilizar. Se ve claro en el ejemplo, en el que hemos declarado 2.
-
<script language="javascript">
-
function Initialize()
-
{
-
new HrvToolkit.Utilidades.ComboEditable('Combo1');
-
new HrvToolkit.Utilidades.ComboEditable('ComboDePepe');
-
}
-
window.onload = function() { Initialize() };
-
-
</script>
Una vez realizados éstos 2 pasos, utilizaremos el código para generar el combo. Ten en cuenta que en id y name debes poner lo mismo que lo declarado anteriormente en la función Initialize.
También podemos aplicar estilos CSS, como vemos en el segundo combo editable, del cual hemos modificado el ancho.
Así de simple, nos aparecerá junto a las opciones que hayamos declarado para el combo, una al final llamada Otro, la cual nos permitirá insertar el valor deseado. Veamos como quedaría finalmente el código:
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-
<title>Combo editable</title>
-
-
<script language="javascript" src="js/prototype.js"></script>
-
<script language="javascript" src="js/cboOtro.js"></script>
-
<script language="javascript">
-
function Initialize()
-
{
-
new HrvToolkit.Utilidades.ComboEditable('Combo1');
-
new HrvToolkit.Utilidades.ComboEditable('ComboDePepe');
-
}
-
window.onload = function() { Initialize() };
-
</script>
-
<link href="css/syles.css" rel="stylesheet" type="text/css" />
-
</head>
-
-
<select id="Combo1" name="Combo1">
-
<option value="1">opcion 1</option>
-
<option value="2">opcion 2</option>
-
</select>
-
</p>
-
-
<select id="ComboDePepe" name="ComboDePepe" style="width:200px">
-
<option value="1">opcion 3</option>
-
<option value="2">opcion 4</option>
-
</select>
-
</p>
-
</body>
-
</html>
Si tienes dudas o quieres ver el ejemplo funcionando puedes descargártelo desde aquí.
Categoria: CSS, Javascript, General
- Añadir este post a
- Del.icio.us -
- Meneame -
- Digg -
- Webeame
Entradas relacionadas
Deja un comentario
