Selecteer JavaScript

array Python module | ast Python module | base64 Python module | code Python module | COM PHP module | dis Python module | DOM PHP module | Ev PHP module | Event PHP module | exp | html Python module | http Python module | imp Python module | io Python module | JavaScript | jQuery JavaScript library | os Python module | PDO PHP module | PS PHP module | pty Python module | Python Development | Python functions | re Python module | select Python module | SPL PHP module | StackOverflow | string Python module | time Python module | tty Python module | UI PHP module

Michael Zippo

Zoals u zult leren hoe u webformulieren kunt maken, is een van de meest voorkomende taken het ophalen van waarden ‚Äã‚Äãuit vervolgkeuzemenu`s. In dit artikel gaan we leren hoe u deze waarden kunt verkrijgen met JavaScript.

Laten we een kort overzicht geven van hoe u een dropdown-element kunt maken met HTML. Volg mijn Codepen als je verdwaalt.

om ons dropdown-element te bouwen, moeten we de select gebruiken en de -optie gebruiken die hieronder is genest. Het selectie-element maakt het vervolgkeuzemenu en met de optietags stellen we deze opties in het vervolgkeuzemenu live in.

Laten we een vervolgkeuzemenu maken van onze favoriete vruchten (die emoji`s hebben).

we hebben een lege h2 toegevoegd die we later met JavaScript zullen invullen. Op dit punt kun je je favoriete fruit kiezen:

Hier hebben we toegang tot de attribuutopties d ` array-element. Vervolgens kiezen we de index van de geselecteerde optie en openen we de waarde of tekst.

Probeer nu beide variabelen console.log te loggen. Wat gebeurd er? Niks. Waarom? Omdat ons eerste element een lege waarde heeft (het is slechts een tijdelijke aanduiding). Geef uw mening over de eerste optie en probeer het opnieuw. Hoera! We krijgen de waarde en de tekst met het javascript.

Luisteren naar wijzigingen in het vervolgkeuzemenu met javascript

We moeten ons vervolgkeuzemenu dynamisch maken omdat JavaScript is ontworpen om te reageren op wijzigingen op uw pagina. Met dat in gedachten gaan we een eventListener toewijzen aan ons fruit-element.

Met onze eventListener horen we een wijziging in ons vervolgkeuzemenu. Merk op dat je de waarde van de geselecteerde optie ook kunt krijgen door e.target.value uit te voeren, wat je waarschijnlijk in een andere zelfstudiemodule hebt gezien.

we zijn hier. Je kunt nu een fruitoptie selecteren en JavaScript zal reageren op de wijzigingen in ons vervolgkeuzemenu en onze h2 dienovereenkomstig bijwerken. Succesvolle wet

Conclusie

Hoe het ontvouwen van waarden ‚Äã‚Äãeen essentiële vaardigheid is als je webontwikkeling leert. De waarden die we krijgen zijn belangrijk als we een basisgegevens willen bijwerken die een selectie tonen aan de gebruiker of "reageer" gewoon op veranderingen in de DOM. Met JavaScript kunnen we deze waarden in een mum van tijd verkrijgen