Crear un elemento de opción HTML Usando el Constructor JavaScript Option ()

El poco conocido constructor JavaScript Option () le permite evitar la sintaxis detallada de crear elementos DOM

A todos nos encanta jQuery. Entre las muchas cualidades impresionantes de esta biblioteca está la capacidad de crear fácilmente elementos DOM y colocarlos en el documento sin la sintaxis normalmente detallada de JavaScript nativo.

Pero hay una característica poco conocida de JavaScript que le permite crear elementos de opción con un esfuerzo bastante mínimo. Esta característica es el constructor Option (). La sintaxis es simple:

  1. Obtenga una referencia a un elemento de formulario
  2. Instancie el constructor y asocie el objeto devuelto con el elemento de formulario
  3. Durante la instanciación, pase los siguientes argumentos: 1) el texto que se muestra en la página , 2) el valor del control , 3) si es la selección predeterminada y si está seleccionada

Ejemplo # 1

En el Ejemplo # 1, tenemos un formulario simple que incluye un control select. En el marcado hay tres opciones: «lunes», «martes» y «miércoles». Cuando se ejecuta JavaScript, se llevan a cabo las siguientes acciones:

  1. Obtenemos una referencia a los controles de selección («w»)
  2. Eliminamos todos los elementos de opción (w.length = 0)
  3. Creamos una matriz de objetos, cada uno con dos propiedades («d»)
  4. Recorremos la matriz y para cada elemento de la matriz, creamos dinámicamente un nuevo elemento select, utilizando las propiedades «text» y «val» del objeto. En cada caso, los dos últimos argumentos:»false»,» false » significan que este nuevo elemento no será el predeterminado, ni se seleccionará.

Y eso es todo!

Summary

El poco conocido constructor Option () se puede usar para crear nuevos elementos de opciones HTML. Por lo tanto, dependiendo de cómo elija abordar esto, puede escribir un código bastante eficiente que siga la sintaxis normalmente detallada del documento.createTextNode (), document.createElement () y document.Métodos appendChild ().

Enlaces útiles para el constructor JavaScript Option ()

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

More: