Usted puede utilizar el código javascript seleccionar objeto de una manera poderosa para sus necesidades de programación HTML5 y CSS3. Para realizar varias labores de selección, lo que tiene que hacer algunos cambios tanto en el HTML y el código javascript. Echa un vistazo a esta página con un cuadro de lista de selección múltiple.

Cómo codificar una elija objeto selección múltiple

Modifica el seleccionar código de dos maneras para seleccionar varias opciones:

• Indican se permiten múltiples selecciones. Por defecto, seleccionar cajas tienen un solo valor. Tendrá que configurar un interruptor para decirle al navegador para permitir que más de un elemento a seleccionar.

• Hacer el modo de selección de una línea múltiple. El comportamiento desplegable estándar no tiene sentido cuando se desea seleccionar varias opciones debido a que el usuario necesita para ver todas las opciones a la vez. La mayoría de los navegadores cambian automáticamente en un modo multi-línea, pero se debe controlar el proceso directamente.

Selección múltiple

El código no es sorprendente, pero tiene algunas características importantes:

• Llama a seleccionar objeto selLanguage. Como de costumbre, los elementos del formulario necesitan una carné de identidad atribuye de manera que se puede leer en el código javascript.

  Video: Tutorial de Listas de Selección en HTML, Formularios HTML para Principiantes

• Añade el múltiple atribuir a su objeto. Este atributo indica al navegador para aceptar múltiples entradas usando Shift + clic (para selecciones contiguas) o Ctrl + clic (para la selección más precisa).

• Selecciona el tamaño a 10. El tamaño indica el número de líneas que se mostrará.

  Video: Galería de imagenes con HTML5 Y CSS3 funcioona perfectamente en google chrome ultima version!!!!

• Hacer un botón. Con la selección múltiple, es probable que no desee activar la acción hasta que el usuario ha terminado de hacer las selecciones. Un botón independiente es la forma más fácil de asegurarse de que el código se activa cuando se desea que suceda.

• Crear un salida div. Este código tiene la respuesta.

Cómo escribir el código javascript

El código javascript para leer un cuadro de lista de selección múltiple es un poco diferente que el código de selección estándar. los valor la propiedad por lo general devuelve un valor, sino un cuadro de lista de selección múltiple vuelve a menudo más de un resultado.

La clave es reconocer que una lista de opción objetos dentro de una seleccionar objeto es en realidad una especie de matriz, no sólo un valor. Usted puede mirar más de cerca la lista de objetos para ver cuales son seleccionados queridos, que es esencialmente lo que el showChoices () función no hace:

En un primer momento, el código parece intimidante, pero si se descomponen, no es demasiado difícil.

1. Crear una variable para representar a la totalidad seleccionar objeto.

   El estandar getElementById () técnica funciona bien.

    var selLanguage = document.getElementById ("selLanguage") -

2. Crear una variable de cadena para mantener la salida.

   Cuando usted está construyendo salida HTML complejo, trabajando con una variable de cadena es mucho más fácil que escribir código directamente al elemento.

    resultado var = "
   sus Idiomas
   "-

3. Construir una lista desordenada para mostrar los resultados.

   Una lista sin orden es una buena manera de escupir los resultados.

    resultado + = "
    norte"-

4. Paso a través selLanguage como si fuera una matriz.

   Usar una para bucle para examinar la línea de cuadro de lista por línea. Tenga en cuenta que selLanguage tiene un longitud propiedad como una matriz.

    for (i = 0- i lt; selLanguage.length- i ++) {

5. Asignar el elemento actual en una variable temporal.

   los currentOption variable contiene una referencia a cada opción elemento en el objeto original como el bucle progresa.

    currentOption = selLanguage [i] -

6. Comprobar para ver si el elemento actual se ha seleccionado.

   El objeto currentOption tiene un seleccionado propiedad que le indica si el objeto ha sido puesto de manifiesto por el usuario. seleccionado es una propiedad booleana, por lo que es verdadero o falso.

    si (currentOption.selected == true) {

7. Si se ha seleccionado el elemento, añadir una entrada en la lista de salida.

   Si el usuario ha destacado este objeto, crear una entrada en la lista desordenada alojada en el resultado variable.

    resultado + = "

8. " + + CurrentOption.value "
norte"-

9. Cerrar la lista.

   Después de que el bucle ha terminado un ciclo a través de todos los objetos, puede cerrar la lista desordenada que ha sido la construcción.

    resultado + = " norte"-

10. Imprimir resultados a la div.

    los salida div de innerHtml la propiedad es un lugar ideal para imprimir la lista desordenada.

     salida = document.getElementById ("salida") - output.innerHTML = result-

Algo extraño está pasando aquí. Las opciones de un cuadro de selección actúan como una matriz. Una lista sin orden se parece mucho a una matriz. ¡Bingo! Ellos son arrays, sólo que en diferentes formas. Se puede pensar en los datos que figuran como una matriz. A veces a organizar los datos como una lista (por pantalla), a veces como una matriz (para el almacenamiento en la memoria), y, a veces se trata de un grupo selecto (para la entrada del usuario).