Legen Sie den Wert des verborgenen Felds mit jQuery fest
-
Verwenden Sie die
.val()-Methode, um das verborgene Feld festzulegen - Verwenden Sie die CSS-Attributauswahl, um das verborgene Feld festzulegen
-
Verwenden Sie die
.attr()-Methode, um das verborgene Feld festzulegen
Sie können drei Optionen verwenden, um ein verstecktes Feld mit jQuery festzulegen. Die erste und zweite verwenden die Methoden .val() und .attr(), während die letzte einen CSS-Attributselektor verwendet.
In diesem Artikel erfahren Sie, wie Sie sie alle anhand von Codebeispielen verwenden.
Verwenden Sie die .val()-Methode, um das verborgene Feld festzulegen
Wir können die jQuery-Methode .val() verwenden, um den Wert des verborgenen Felds festzulegen. Alles, was Sie brauchen, ist der richtige CSS-Selektor, der als Proxy fungiert; Von dort aus können Sie den Wert ändern.
Der folgende HTML-Code hat einen Eingabewert mit type=hidden; dies macht es zu einem verborgenen Feld. Anschließend können Sie den Wert mit der Methode .val() festlegen.
Wenn Sie den Code in Ihrem Webbrowser ausführen, sehen Sie den verborgenen Wert in einer JavaScript-Warnmeldung.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-set-hidden-field-value</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
main {
display: flex;
justify-content: center;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
</style>
</head>
<body>
<main>
<form>
<label>
<input type="checkbox" name="google" value="google"> Google
</label>
<label>
<input type="checkbox" name="facebook" value="facebook"> Facebook
</label>
<input type="hidden" name="hidden_input" id="hidden_input">
</form>
</main>
<script>
$(document).ready(function() {
// Set the value of the hidden input
// using the val method.
$("#hidden_input").val("top_companies");
// Show the hidden input as an alert message
alert("The hidden value is: " + $("#hidden_input").val());
});
</script>
</body>
</html>
Ausgang:
Verwenden Sie die CSS-Attributauswahl, um das verborgene Feld festzulegen
Die Verwendung eines CSS-Attributselektors zum Festlegen eines verborgenen Felds erfordert auch die jQuery-Methode .val(). Dies ist eine Option für Sie, wenn Sie keine HTML-IDs oder CSS-Klassen verwenden können.
Der folgende HTML-Code ist derselbe, aber wir haben die Kontrollkästchen aktualisiert. Im jQuery-Code greifen Sie die versteckte Eingabe mit einem CSS-Attributselektor und setzen ihren Wert mit der Methode .val().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-set-hidden-field-value</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
main {
display: flex;
justify-content: center;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
</style>
</head>
<body>
<main>
<form>
<label>
<input type="checkbox" name="erlang" value="erlang"> Erlang
</label>
<label>
<input type="checkbox" name="elixir" value="elixir"> Elixir
</label>
<input type="hidden" name="hidden_input" id="hidden_input">
</form>
</main>
<script>
$(document).ready(function() {
// Set the value of the hidden input
// using a CSS attribute selector
$("input[id=hidden_input]").val("functional_languages");
// Show the hidden input as an alert message
alert("The hidden value is: " + $("#hidden_input").val());
});
</script>
</body>
</html>
Ausgang:
Verwenden Sie die .attr()-Methode, um das verborgene Feld festzulegen
Die Methode .attr() ist ein direkter Ansatz, um einen versteckten Wert zu setzen. Der Prozess besteht darin, das verborgene Feld zu ergreifen; Verwenden Sie die Methode .attr(), um einen neuen versteckten Wert zu schreiben.
Daraus können Sie den verborgenen Wert später in Ihrem Code verwenden. Hier zeigen Sie es in einer JavaScript-Warnmeldung an.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>03-jQuery-set-hidden-field-value</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
main {
display: flex;
justify-content: center;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
</style>
</head>
<body>
<main>
<form>
<label>
<input type="checkbox" name="hewlett-packard" value="hewlett-packard"> Hewlett-Packard
</label>
<label>
<input type="checkbox" name="asus" value="asus"> ASUS
</label>
<input type="hidden" name="hidden_input" id="hidden_input">
</form>
</main>
<script>
$(document).ready(function() {
// Set the value of the hidden input
// using
$("#hidden_input").attr("value", "computer_companies");
// Show the hidden input as an alert message
alert("The hidden value is: " + $("#hidden_input").val());
});
</script>
</body>
</html>
Ausgang:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn