Holen Sie sich einen ausgewählten Wert aus der Dropdown-Liste mit JavaScript und jQuery
- Holen Sie sich den Select-Wert mit Vanilla JavaScript
- Holen Sie sich den ausgewählten Wert mit jQuery
In diesem Artikel erfahren Sie, wie Sie mit Vanilla JavaScript und jQuery einen ausgewählten Wert erhalten. Wir erklären zwei Beispiele; Das erste zeigt den JavaScript-Ansatz und das zweite Beispiel verwendet jQuery.
Holen Sie sich den Select-Wert mit Vanilla JavaScript
Sobald Sie ein <select>-Element in HTML definiert haben, können Sie über JavaScript auf seinen Wert zugreifen. Das liegt daran, dass JavaScript Methoden und Funktionen bereitstellt, die ein Element manipulieren können.
Sie variieren jedoch je nach Element. Für jedes <select>-Element können Sie also wie folgt auf seinen Wert zugreifen:
element.wert auswählen- Eigenschaft
OptionenundausgewählterIndex
Holen Sie sich den Auswahlwert mit Selectelement.value
Das Element <select> hat eine Eigenschaft value, die den Wert des ausgewählten Elements enthält. Wir haben also einige Länder im Element <select> im folgenden Code.
Wenn Sie auf die HTML-Schaltfläche klicken, erhalten Sie den Auswahlwert. Außerdem werden Sie feststellen, dass jede <option> des <select>-Elements eine value-Eigenschaft hat.
Sie können diese Eigenschaft entfernen oder beibehalten. Sie erhalten das gleiche Ergebnis.
Code:
<head>
<meta charset="utf-8">
<title>Get Selected Value With Vanilla JS</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<main>
<form>
<label>Pick a food</label>
<select id="select_menu">
<option value="Rice">Rice</option>
<option value="Carrot" selected="selected">Carrot</option>
<option value="Avocado">Avocado</option>
<option value="Banana">Banana</option>
</select>
<button id="submit_button">Get Food Name</button>
</form>
</main>
<script>
let submit_button = document.getElementById("submit_button");
let select_menu = document.getElementById("select_menu")
submit_button.addEventListener("click", function(event) {
// Prevent the submission of the form
event.preventDefault();
var selected_value = "Hooray!, you selected " + select_menu.options[select_menu.selectedIndex].value;
alert(selected_value);
});
</script>
</body>
Ausgang:
Holen Sie sich den Select-Wert mit der Eigenschaft options und selectedIndex
Durch den Zugriff auf die Eigenschaft <options> erhalten Sie Zugriff auf die Eigenschaft selectedIndex. Diese Eigenschaft repräsentiert das aktuell ausgewählte Element.
Außerdem hat die Eigenschaft selectedIndex die value-Eigenschaft, die den ausgewählten Wert zurückgibt.
Zum Beispiel haben wir Lebensmittelnamen im Element <select> im folgenden Code. Sie können also einen Lebensmittelnamen auswählen und auf die Schaltfläche klicken, um seinen Wert zu erhalten.
Code:
<head>
<meta charset="utf-8">
<title>Get Selected Value With Vanilla JS</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<main>
<form>
<label>Where are you from?</label>
<select id="select_menu">
<option value="Germany">Germany</option>
<option value="Ethiopia" selected="selected">Ethiopia</option>
<option value="Romania">Romania</option>
<option>Madagascar</option>
</select>
<button id="submit_button">Get Country Name</button>
</form>
</main>
<script>
let submit_button = document.getElementById("submit_button");
let select_menu = document.getElementById("select_menu")
submit_button.addEventListener("click", function(event) {
// Prevent the submission of the form
event.preventDefault();
var selected_value = "Hello, you are from: " + select_menu.options[select_menu.selectedIndex].value;
alert(selected_value);
});
</script>
</body>
Ausgang:
Holen Sie sich den ausgewählten Wert mit jQuery
Die jQuery-Bibliothek vereinfacht viele Vanilla-JavaScript-Aufgaben, einschließlich des Abrufens eines Auswahlwerts. In der Zwischenzeit sind Sie nicht verpflichtet, eine Aufgabe in jQuery so zu lösen, wie Sie es in Vanilla JavaScript tun würden.
Wir können also einen anderen Ansatz wählen. Trotzdem erhalten wir den ausgewählten Wert.
Die erste Änderung besteht darin, dass die Elemente <option> nicht die Eigenschaft value haben. Eine weitere Änderung ist unser Ansatz, um das ausgewählte Element zu erhalten.
Hier verwenden wir die jQuery .change() API für das <select> Element. Dies bedeutet, dass wir den ausgewählten Wert jedes Mal erhalten können, wenn wir ihn auswählen.
Code:
<head>
<meta charset="utf-8">
<title>Get Selected Value With jQuery</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<main>
<form>
<label>Choose a Language</label>
<select id="programming_language">
<option>Swift</option>
<option>Obective-C</option>
<option>Erlang</option>
<option>COBOL</option>
<option>FORTRAN</option>
</select>
</form>
</main>
<script>
$(document).ready(function () {
$('#programming_language').change(function () {
var programming_language = document.getElementById("programming_language");
var selected_value = programming_language.options[programming_language.selectedIndex].value
alert("You selected " + selected_value);
});
});
</script>
</body>
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