Creazione di un elemento di opzione HTML Utilizzando il costruttore JavaScript Option ()

Il poco noto costruttore JavaScript Option () consente di evitare la sintassi dettagliata della creazione di elementi DOM

Tutti noi amiamo jQuery. Tra le molte qualità impressionanti di questa libreria c’è la capacità di creare facilmente elementi DOM e metterli nel documento senza la sintassi normalmente prolissa di JavaScript nativo.

Ma c’è una caratteristica poco conosciuta di JavaScript che consente di creare elementi di opzione con uno sforzo abbastanza minimo. Questa funzione è il costruttore Option (). La sintassi è semplice:

  1. Ottenere un riferimento a un elemento form
  2. Istanziare il costruttore e associare l’oggetto restituito con l’elemento form
  3. Durante l’istanziazione, passare i seguenti argomenti: 1) il testo mostrato nella pagina , 2) il valore del controllo , 3) se è la selezione predefinita e se è selezionato

Esempio # 1

Nell’esempio # 1, abbiamo una forma semplice che include un controllo di selezione. Nel markup ci sono tre opzioni:” Lunedì”,” martedì “e”Mercoledì”. Quando viene eseguito JavaScript, vengono eseguite le seguenti azioni:

  1. Otteniamo un riferimento ai controlli di selezione (“w”)
  2. Cancelliamo tutti gli elementi dell’opzione (w.length = 0)
  3. Creiamo un array di oggetti, ognuno con due proprietà (“d”)
  4. Eseguiamo un loop attraverso l’array e per ogni elemento dell’array, creiamo dinamicamente un nuovo elemento select, utilizzando le proprietà “text” e “val” dell’oggetto. In ogni caso gli ultimi due argomenti: “false”, “false” significano che questo nuovo elemento non sarà l’impostazione predefinita, né verrà selezionato.

E il gioco è fatto!

Sommario

Il poco noto costruttore Option() può essere utilizzato per creare nuovi elementi di opzione HTML. Quindi, a seconda di come si sceglie di avvicinarsi a questo, è possibile scrivere un codice piuttosto efficiente che esegue la sintassi normalmente dettagliata del documento.createTextNode (), documento.createElement () e document.Metodi appendChild ().

Collegamenti utili per il costruttore JavaScript Option ()

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

More: