Définition et Usage La méthode HTML val()
jQuery cours tutorialLa méthode val() renvoie ou définit l'attribut value des éléments sélectionnés.
Note : La méthode .val() est principalement utilisée pour obtenir les valeurs des éléments de formulaire comme input , select et textarea . Dans le cas des éléments <select multiple="multiple"> la méthode .val() retourne un tableau contenant chaque option choisie ; Si aucune option n'est sélectionnée, elle retourne null .
La méthode val() Retourner l'attribut valeur
Retourne la valeur de l'attribut value de l'élément sélectionné.
Syntaxe
$(selector).val()
Exemple : obtenir la valeur unique d'un seul select et un tableau de valeurs d'un select multiple et afficher leurs valeurs.
Sélectionner le code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
function displayVals() {
var singleValues = $("#single").val();
var multipleValues = $("#multiple").val() || [];
$("p").html("<b>Single:</b> " +
singleValues +
" <b>Multiple:</b> " +
multipleValues.join(", "));
}
$("select").change(displayVals);
displayVals();
});
});
</script>
<style>
p { color:red; margin:4px; }
b { color:blue; }
</style>
</head>
<body>
<p></p>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple1</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<button>Cliquez pour voir</button>
</body>
</html>
Définissez l'attribut de valeur
Définit la valeur de l'attribut value des éléments sélectionnés.
Syntaxe
$(sélecteur).val(value)
| Paramètre |
Description |
|---|---|
| valeur | Spécifie la valeur de l'attribut value |
Exemple Définir la valeur d'un champ de saisie
Sélectionner le code
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input:text").val("Olivier");
});
});
</script>
</head>
<body>
<p>Nom: <input type="text" name="user" /></p>
<button>Définissez la valeur </button>
</body>
</html>
Définissez l'attribut de valeur à l'aide d'une fonction
Utilisation d'une fonction pour définir la valeur de l'attribut value pour tous les éléments sélectionnés.
Syntaxe
$(sélecteur).val(function(index,oldvalue))
| Paramètre | Description |
|---|---|
| function(index,OldValue) |
Spécifie une fonction qui retourne la valeur à définir.
|
Exemple définir la valeur d’un champ à l’aide d’une fonction
Sélectionner le code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input:text").val(function(n,c){
return c + " Olivier";
});
});
});
</script>
</head>
<body>
<p>Nom: <input type="text" name="user" value="Piére"
/></p>
<button>Définir la valeur</button>
</body>
</html>
Par gerywa 25 juillet 2014
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
