Methode val
Die Methode val ermöglicht das Abrufen und Ändern
des aktuellen Werts eines Elements.
Syntax
So können wir den aktuellen Wert des ersten Elements in der Auswahl abrufen:
$(Selektor).val();
Die Methode val wird hauptsächlich verwendet, um
Werte von Formularelementen abzurufen, wie z.B.:
input,
select
und textarea. Wenn
sie auf einer leeren Sammlung aufgerufen wird, gibt sie undefined zurück.
Bei der Arbeit mit select, bei dem das Attribut
multiple gesetzt ist, gibt die Methode ein Array der Werte jeder
ausgewählten option zurück. Wenn keine ausgewählt ist,
wird ein leeres Array zurückgegeben. So können wir den
Wert jedes Elements in der Auswahl setzen. Als Parameter können
Zeichenkette, Array oder Zahl übergeben werden:
$(Selektor).val(Wert);
Anwenden einer Funktion auf jedes Element in der Auswahl. Die Funktion erhält als ersten Parameter den aktuellen Index in der Auswahl und als zweiten - seinen aktuellen Wert:
$(Selektor).val(Attributname, function(Index in der Auswahl, aktueller Wert));
Beispiel
Im folgenden Beispiel holen wir die Werte, die in das Input-Feld eingegeben werden, und geben sie unten in einem Absatz aus:
<input type="text" value="text">
<p></p>
p {
color: green;
margin: 8px;
}
$('input').keyup(function() {
let value = $(this).val();
$('p').text(value);
}).keyup();
Beispiel
Und nun werden wir mit der Methode val
die Werte der Knöpfe, die wir
drücken, in das darunter liegende Input-Feld schreiben:
<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);
});
