jump to navigation

Activar valores de un combo dinámicamente Septiembre 16, 2009

Publicado por lineadecodigo en : JavaScript , trackback

La idea de este ejemplo es la de modificar el valor de un combo de forma dinámica. Y así marcar una opción u otra sin que el usuario tenga que interactuar con el combo de selección. Para ello crearemos un combo y tres botones que realicen la interacción.

Lo primero el combo. En este punto es bueno que le eches un ojo a Combo que soporte múltiples selecciones. En dicho artículo podrás ver en detalle la creación del combo.

En este caso, y utilizando la etiqueta SELECT tendremos lo siguiente:

  1.  
  2. <select multiple="multiple" id="favoritos" name="favoritos" size=6>
  3. 	<option value="deportes">Deportes</option>
  4. 	<option value="cine">Cine</option>
  5. 	<option value="teatro">Teatro</option>
  6. 	<option value="fotografía">Fotografía</option>
  7. 	<option value="lectura">Lectura</option>
  8. 	<option value="viajes">Viajes</option>
  9. 	<option value="pintura">Pintura</option>
  10. 	<option value="música">Música</option>
  11. 	<option value="otros">Otros</option>
  12. </select>
  13.  

Ahora pasaremos a poner los tres botones, apoyándonos en la etiqueta BUTTON. Estos, vía el evento onClick, lanzarán el método Mostrar() que será el que tenga la lógica para activar los valores del combo dinámicamente.

  1.  
  2. <button onclick="marcar(1);return false;">Marcar Cine</button>
  3. <button onclick="marcar(3);return false;">Marcar Fotografía</button>
  4. <button onclick="marcar(5);return false;">Marcar Viajes</button>
  5.  

El método Mostrar recibirá un número con la opción a marcar. Hay que recordar que las opciones empiezan por el 0, el cual representará a la primera opción. Para acceder al elemento SELECT utilizamos el ID y el método .getElementById().

Sobre el combo tenemos un array de opciones, representado por .options[]. Y la propiedad de activación es .selected, a la cual asignaremos el valor de true para que dicha opción se active.

  1.  
  2. function marcar(opcion) {
  3. 	document.getElementById('favoritos').options[opcion].selected=true;
  4. }
  5.  

Articulos Similares:

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre Javascript

Enviar entrada por email Enviar entrada por email | Imprimir Imprimir | 2020 visitas

1 Star2 Stars3 Stars4 Stars5 Stars (Todavia sin evaluar)
Loading ... Loading ...

Tags:, , , , , , ,

Comentarios»

1. AngelFQC - Septiembre 16, 2009

hola, cómo puedo llevar un combo desde mysql y que al seleccionaar un elemento llene otro combo

gracias

2. Paulo Arieu - Septiembre 17, 2009

Hola.
Le deje una inquietud en el foro de javascript. Espero Dios mediante,me pueda ud. nuevamente asesorar a fin de resolver mi inquietud,en este caso con el control radio.
Espero su amable respuesta, a fin de solucionar mis inquietudes informaticas.
Saludos cordiales
Paulo Arieu

3. manolo - Junio 3, 2010

Hola.
Muy bueno, pero quería saber como se podría cambiar el código para que si una opción está marcada y le das al botón, que se desmarque esa opción.
Gracias y un saludo.

4. lineadecodigo - Junio 4, 2010

@manolo,

La función desmarcar sería así:

function desmarcar(opcion) {
document.getElementById(‘favoritos’).options[opcion].selected=false;
}




Si tienes dudas sobre Javascript no dudes en visitar el Foro sobre Javascript.
Imagen CAPTCHA CAPTCHA Audio
Refrescar imagen