Cómo recorrer las opciones de selección

Escrito por sue smith Google | Traducido por luciano ariel castro
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo recorrer las opciones de selección
Las funciones de JavaScript pueden iterar a través de controles de usuario en una página Web. (Creatas Images/Creatas/Getty Images)

Al crear formularios web en páginas HTML, puedes incluir elementos "select" con una lista desplegable de opciones para que los usuarios puedan elegir. Es posible que necesites acceder a los detalles de estos elementos de opción dentro del código JavaScript para el sitio. Al crear un bucle en el código JavaScript, puedes recorrer las opciones de selección, el acceso a la información sobre el contenido HTML y los atributos dentro de ellos. También se puede modificar el contenido HTML si este se adapta a los propósitos de tu página.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Crea una función en la sección "head" ("cabeza") de tu página web en HTML. Entre la apertura y cierre de etiquetas de la cabeza, agrega la siguiente secuencia de comandos:

    <script type="text/javascript"> function loopThroughOptions(selectID) { //function implementation here } </script>

    Cómo recorrer las opciones de selección
    Crea una función en la sección "head". (Burke/Triolo Productions/Brand X Pictures/Getty Images)
  2. 2

    Agrega el código dentro de la función para recorrer las opciones de selección. Para encomendar a la página que agregue la función, introduce el siguiente botón en tu página:

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

    Este botón es para la demostración, pero permitirá ver cómo funciona tu código de bucle. La función de llamada pasa el ID del elemento de selección como un parámetro.

    Cómo recorrer las opciones de selección
    La función de llamada pasa el ID del elemento de selección como un parámetro. (Jupiterimages/Polka Dot/Getty Images)
  3. 3

    Agrega el elemento de selección a tu página de opciones. Si aún no dispones de un elemento de selección en la página, utiliza el siguiente ejemplo de código de marcado:

    <select id="foodselect"> <option value="apple">Apple</option> <option value="cheese">Cheese</option> <option value="onion">Onion</option> </select>

    Asegúrate de que el código incluye el atributo ID, como la función de JavaScript que usarás para identificar el elemento. Coloca el control de selección antes que el botón de prueba.

    Cómo recorrer las opciones de selección
    Coloca el control de selección antes que el botón de prueba. (Polka Dot Images/Polka Dot/Getty Images)
  4. 4

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

    var select = document.getElementById(selectID);

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

    var opts = select.options;

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

    Cómo recorrer las opciones de selección
    Esta variable contiene ahora una matriz que tu código puede recorrer. (Jupiterimages/Comstock/Getty Images)
  5. 5

    Crea un bucle para tus opciones de selección:

    var opt=0; for(opt=0; opt<opts.length; opt++) { //process the options }}

    Este código se ejecutará una vez por cada elemento de opción en el elemento de selección especificado. 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.

    Cómo recorrer las opciones de selección
    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. (Hemera Technologies/Photos.com/Getty Images)
  6. 6

    Procesa cada elemento en la matriz de opciones de selección. El código de ejemplo siguiente se puede utilizar para comprobar que tu función está trabajando; agrégalo dentro del bucle:

    alert("Option " + opt + " = " + opts[opt].value);

    Cómo recorrer las opciones de selección
    Procesa cada elemento en la matriz de opciones de selección. (Hemera Technologies/AbleStock.com/Getty Images)
  7. 7

    Guarda la página y ábrela en un navegador Web para probarla. Debes ver el atributo de valor de cada elemento de opción emitido de un diálogo de alerta, uno tras otro. Puedes acceder a otros aspectos del elemento de opción, como tu contenido HTML de la siguiente manera:

    alert("Option " + opt + " = " + opts[opt].innerHTML);

    Cómo recorrer las opciones de selección
    Guarda la página y ábrela en un navegador Web para probarla. (Jupiterimages/Comstock/Getty Images)

Consejos y advertencias

  • También puedes definir los aspectos de los elementos de opción de JavaScript.
  • Ten cuidado de no crear accidentalmente un bucle infinito cuando iteras a través de las matrices.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles