Cómo recorrer Seleccione Opciones

Al crear formularios de páginas web en las páginas HTML, puede incluir "seleccionar" elementos con una lista desplegable de opciones para los usuarios a elegir. Es posible que necesite acceder a los detalles de estos elementos de opción dentro del código JavaScript para su sitio. Mediante la creación de un bucle en el código JavaScript, que se pueden recorrer las opciones de selección, el acceso a la información sobre el contenido HTML y atributos dentro de ellos. También puede alterar el contenido HTML si este se adapte a los efectos de su página.

Instrucciones

1 Crear una función en la sección de cabecera de su página Web HTML. Entre las etiquetas de apertura y cierre de la cabeza, agregue la siguiente sección y la función de la escritura esquema:

<Script type = "text / javascript">
loopThroughOptions función () {selectID
// Implementación de la función aquí
}
</ Script>

2 Agregue el código dentro de la función para recorrer las opciones de selección. Instruir a la página para llamar a la función, agregue el siguiente botón en su página:

<input type = "button" onclick = "loopThroughOptions ( 'foodselect')" value = "bucle" />

Este botón es para la demostración, pero permitirá que usted vea que su bucle funciones de código. La llamada a la función pasa el ID de elemento de selección como parámetro.

3 Agregue el elemento de selección a la página con opciones. Si aún no dispone de un elemento de selección en su página, utilice el siguiente ejemplo de código de marcado:

<Select id = "foodselect">
<Option value = "Apple"> Apple </ option>
<Option value = "queso"> Queso </ option>
<Option value = "cebolla"> cebolla </ option>
</ Select>

Asegúrese de que su código incluye el atributo ID, como la función de JavaScript lo utilizará para identificar el elemento. Coloque el control de selección antes de que el botón de prueba.

4 Agregue el siguiente código dentro de la función JavaScript para obtener una referencia al elemento de selección utilizando su valor de atributo ID:

var seleccione = document.getElementById (selectID);

Este código utiliza el parámetro pasado para obtener una referencia al elemento. Agregue el código siguiente, el uso de este elemento para adquirir una variable de matriz que contiene los elementos de opción:

var = opta select.options;

Esta variable contiene ahora una matriz que su código puede recorrer.

5 Crear un bucle para sus opciones de selección:

var opt = 0;
para (opt = 0; opt <opts.length; optar ++) {
// proceso las opciones
}}

Este código se ejecutará una vez por cada elemento de opción en el elemento de selección especificados. El bucle comienza en cero, que es la primera posición de índice en una matriz, entonces itera a través de la matriz hasta que alcanza la posición final.

6 Procesar cada elemento del array seleccione opciones. El siguiente código de ejemplo se puede utilizar para comprobar que su función está trabajando; agregarlo dentro del bucle:

alert ( "Opción" + Opt + "=" + opta [opt] .value);

7 Guarde la página y abrirlo en un navegador Web para probarlo. Debería ver el atributo de valor de cada elemento de opción emitida a un diálogo de alerta, una tras otra. Puede acceder a otros aspectos del elemento opción como su contenido HTML de la siguiente manera:

alert ( "Opción" + Opt + "=" + opta [opt] .innerHTML);

Consejos y advertencias

• También puede establecer los aspectos de elementos de opción de JavaScript.
• Tenga cuidado de no crear accidentalmente un bucle infinito cuando iteración a través de las matrices.