een HTML-Optieelement maken met behulp van de JavaScript-optie() Constructor

met de weinig bekende JavaScript-optie() constructor kunt u de uitgebreide syntaxis van het maken van DOM-elementen

vermijden We houden allemaal van jQuery. Onder de vele geweldige kwaliteiten van deze bibliotheek is de mogelijkheid om DOM-elementen eenvoudig te maken en ze in het document te plaatsen zonder de normaal gesproken uitgebreide syntaxis van native JavaScript.

maar er is een weinig bekende functie van JavaScript waarmee u optieelementen kunt maken met een vrij minimale inspanning. Deze functie is de optie () constructor. De syntaxis is eenvoudig:

  1. een verwijzing ophalen naar een vormelement
  2. Instantieer de constructor en koppel het geretourneerde object aan het vormelement
  3. tijdens instantiatie, geef-in de volgende argumenten: 1) de tekst op de pagina , 2) de waarde van het besturingselement , 3) als het de standaard selectie is en als het is geselecteerd

Voorbeeld # 1

in Voorbeeld # 1, hebben we een eenvoudig formulier dat een select-besturingselement bevat. In de markup zijn er drie opties:” maandag”,” dinsdag “en”woensdag”. Wanneer de JavaScript draait, vinden de volgende acties plaats:

  1. we krijgen een verwijzing naar de Select controls (“w”)
  2. we verwijderen alle optieelementen (w.length = 0)
  3. we maken een array van objecten, elk met twee eigenschappen (“d”)
  4. we lus door de array en voor elk array-element, dynamisch een nieuw select-element, met behulp van de eigenschappen” text “en” val ” van het object. In elk geval betekenen de laatste twee argumenten: “false”,”false” dat dit nieuwe element niet de standaard zal zijn, noch zal het worden geselecteerd.

en dat is het!

samenvatting

de weinig bekende Option () constructor kan worden gebruikt om nieuwe HTML-optieelementen aan te maken. Dus, afhankelijk van hoe u ervoor kiest om dit te benaderen, kunt u een aantal vrij efficiënte code die kant-stappen de normaal verbose syntaxis van het document te schrijven.createTextNode (), document.createElement (), en document.appenchild () methoden.

Nuttige Links voor de JavaScript-optie () constructor

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.

More: