Linea de Codigo

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:

 
<select multiple="multiple" id="favoritos" name="favoritos" size=6>
<option value="deportes">Deportes</option>
<option value="cine">Cine</option>
<option value="teatro">Teatro</option>
<option value="fotografía">Fotografía</option>
<option value="lectura">Lectura</option>
<option value="viajes">Viajes</option>
<option value="pintura">Pintura</option>
<option value="música">Música</option>
<option value="otros">Otros</option>
</select>
 

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.

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

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.

 
function marcar(opcion) {
	document.getElementById('favoritos').options[opcion].selected=true;
}