De methode val
De methode val maakt het mogelijk om de huidige waarde van een element te verkrijgen en te wijzigen.
Syntaxis
Zo kunnen we de huidige waarde van het eerste element in de set verkrijgen:
$(selector).val();
De methode val wordt voornamelijk gebruikt om waarden van formulierelementen te verkrijgen, zoals:
input,
select
en textarea. Als
hij wordt aangeroepen op een lege collectie, retourneert hij undefined.
Bij het werken met een select waarbij het attribuut
multiple is ingesteld, retourneert de methode een array met waarden van elke
geselecteerde option. Als geen van hen is geselecteerd,
wordt een lege array geretourneerd. Zo kunnen we de
waarde van elk element in de set instellen. Als parameter kunnen we
een string, een array of een getal doorgeven:
$(selector).val(waarde);
Een functie toepassen op elk element in de set. De functie accepteert als eerste parameter de huidige index in de set, en als tweede - zijn huidige waarde:
$(selector).val(attribuutnaam, function(index in set, huidige waarde));
Voorbeeld
Laten we in het volgende voorbeeld de waarden die in de input worden ingevoerd verkrijgen en hieronder in een paragraaf weergeven:
<input type="text" value="text">
<p></p>
p {
color: green;
margin: 8px;
}
$('input').keyup(function() {
let value = $(this).val();
$('p').text(value);
}).keyup();
Voorbeeld
Laten we nu met behulp van de methode val
de waarden van de knoppen waarop we klikken
in het onderstaande invoerveld vastleggen:
<div>
<button>one</button>
<button>two</button>
<button>three</button>
<button>four</button>
</div>
<input type="text" value="click buttons">
button {
margin: 4px;
cursor: pointer;
}
input {
margin: 4px;
color: green;
}
$('button').click(function() {
let text = $(this).text();
$('input').val(text);
});
