Activar valores de un combo dinámicamente

16/Sep/2009 JavaScript , , , , 5 Comentarios

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.  

Vídeos sobre Javascript


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

5 comentarios en “Activar valores de un combo dinámicamente”

Víctor Cuervo

lineadecodigo

@manolo,

La función desmarcar sería así:

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

Víctor Cuervo

manolo

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.

Víctor Cuervo

Paulo Arieu

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

Víctor Cuervo

AngelFQC

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

gracias

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*