Cómo añadir opciones dinámicas a un ComboBox en JavaScript

Escrito por sue smith Google | Traducido por beatriz sánchez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo añadir opciones dinámicas a un ComboBox en JavaScript
Los formularios web HTML pueden capturar distintos tipos de datos de usuario. (Erik Snyder/Lifesize/Getty Images)

Las páginas web pueden presentar elementos de entrada de usuario dentro de formularios, capturando los datos de usuario y enviándolos a los scripts del servidor. Los elementos de opción y selección en HTML permiten a los desarrolladores crear listas desplegables o objetos combo-box. Usándolos, el usuario pueden seleccionar de entre un conjunto de opciones predefinidas. Añadiendo una función JavaScript a tu página, puedes modificar el contenido de un elemento de selección dinámicamente, a medida que el usuario interactúa en tu página. Los objetos de opción y selección te permiten crear y añadir nuevas opciones para tus usuarios.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Añade el elemento de selección a tu página. Inserta el siguiente marcado HTML de ejemplo entre las etiquetas de apertura y de cierre en la página web:

    <select id="selectElement"> <option value="cat">Cat</option> <option value="dog">Dog</option> <option value="mouse">Mouse</option> </select>

    Este elemento de selección presenta tres opciones que representan distintos animales. Puedes modificar el contenido de las opciones para que se ajuste a los datos que intentamos capturar.

  2. 2

    Añade una sección para JavaScript dentro de tu página. Entre las etiquetas de cabecera de apertura y de cierre en tu archivo, añade el siguiente código :

    <script type="text/javascript"> //functions here </script>

    Puedes añadir cualquier función de JavaScript en esta sección y los elementos de tu página podrán llamarlas en la interacción de usuario o cualquier otro evento. También puedes incluir tu JavaScript en un archivo separado y añadir un enlace a él en tu cabecera de página, como alternativa.

  3. 3

    Añade una función para procesar la modificación de la opción de selección. Inserta la función siguiente entre las etiquetas de script de apertura y cierre en tu sección de cabecera de página:

    function addOption() { //implement adding an option }

    Dentro de esta función, puedes añadir el código para modificar dinámicamente el contenido de tu elemento de sección. Puedes configurar la página para llamar a esta función en un evento que se ajusta a la funcionalidad de la página.

  4. 4

    Implementa tu operación de suma de selección dinámica. Dentro de tu función JavaScript, como el siguiente código para conseguir una referencia a un elemento de selección en tu página:

    var selectElem = document.getElementById("selectElement");

    De forma alternativa, puedes pasar el atributo ID del elemento de selección como un parámetro si esto se ajusta a tu página. Este código almacena una referencia al elemento en una variable. Inserta el siguiente código para añadir una nueva opción para el elemento de selección:

    selectElem.add(new Option("Chicken", "chicken"), null);

    Este código creará un nuevo objeto de opción, después lo añade al elemento de selección pasándolo como parámetro a la función de adición (add). Este código crea el nuevo objeto de opción pasa el contenido y valor de la opción para aparecer dentro de la página, así que modifícalo para ajustarse a tus necesidades.

  5. 5

    Llama a tu función JavaScript. Puedes ejecutar la función en la interacción del usuario con otros elementos de la página, pero para la demostración puedes modificar las etiquetas del cuerpo de apertura de esta forma:

    <body onload="addOption()">

    Esto llamará a la función en cuanto el navegador del usuario cargue la página. Guarda tu archivo HTML y ábrelo en un navegador. Haz clic en el elemento de selección para ver sus contenidos. Deberías ver la nueva opción que tu código ha añadido junto con las opciones originales indicadas en el HTML.

Consejos y advertencias

  • También puedes modificar las propiedades de los elementos de selección dinámicamente, como el estilo.
  • JavaScript puede ser impredecible en determinados navegadores, así que prueba bien tus páginas.

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