+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Wie übergebe ich den Wert aus einem Select Feld an eine Variable? (/showthread.php?tid=746)
Wie übergebe ich den Wert aus einem Select Feld an eine Variable? - Visierhoch - 25.05.2022
Hallo,
leider kenne ich mich mit JS überhaupt nicht aus, da ich mich in meiner Freizeit mehr mit PHP befasse. Nun komme ich aber vermutlich um eine JS - Lösung nicht herum.
Es geht um Folgendes:
Ich möchte in einem Formular mit dem HTML Element Select die Kontinente auswählen können. In einem zweiten Select Feld sollen dann mit einer If - Abfrage nur die Länder angezeigt werden, die zu diesem Kontinent gehören z. B. Südamerika - Brasilien, Bolivien, Argentinien usw. Allerdings weiß ich nicht, wie ich die Werte aus dem Select Feld 'kontinent' an eine Variable übergebe.
Außerdem glaube ich, dass ich in diesem Fall auch die If - Abfrage falsch erstellt habe, da das Select Feld mit den Ländern immer leer ist. Selbst wenn ich der Variablen selber einen Wert zuweise.
Hier ist mein Code:
Code:
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<select name="kontinent">
<option>Afrika</option>
<option>Europa</option>
</select> <br/><br/>
<select>
<script>
let kontinent = ??????;
if(kontinent == "Afrika") {
document.write("<option>Ägypten</option>");
document.write("<option>Angola</option>");
usw. usw.
} elseif (kontinent == "Europa") {
document.write("<option>Belgien</option>");
document.write("<option>Deutschland</option>");
document.write("<option>Frankreich</option>");
usw. usw.
}
</script>
</select>
</form>Danke
RE: Wie übergebe ich den Wert aus einem Select Feld an eine Variable? - admin - 26.05.2022
Ich würde Arrays nehmen.
Dein document.write() ist veraltet und nimmt man nicht mehr.Dafürr gibt es innerHTML
Ich würde es so machen
RE: Wie übergebe ich den Wert aus einem Select Feld an eine Variable? - Visierhoch - 26.05.2022
Hallo,
und ganz herzlichen dank für die Lösung.
Dann kann ich jetzt die Länder eintragen.
RE: Wie übergebe ich den Wert aus einem Select Feld an eine Variable? - Gast - 04.06.2022
Moin!
Kurze Anmerkung.
Auf KEINEN Fall innerHTML benutzen.
innerHTML erlaubt Cross Site Scripting. Somit können fremde Nutzer eigenes JS in deiner Seite laufen lassen.
Nutze lieber Element.textContent = string
Beste Grüße
RE: Wie übergebe ich den Wert aus einem Select Feld an eine Variable? - admin - 04.06.2022
Man könnte auch die Option Elemente erstellen mit createElement und createTextNode
RE: Wie übergebe ich den Wert aus einem Select Feld an eine Variable? - rzscout - 18.06.2022
Moin,
ich habe hier eine weitere Variante:
Code:
'use strict';
document.addEventListener('DOMContentLoaded', init());
var kontinent, land, auswahl;
const kontinente = ['Europa', 'Afrika', 'Asien'];
const europa = ['Italien','Spanien', 'Frankreich', 'Dänemark', 'Deutschland', 'Schweden', 'Griechenland'];
const afrika = ['Südfafrika', 'Somalia', 'Kenia', 'Marokko', 'Ägypten'];
const asien = ['Indien', 'Thailand', 'China', 'Mongolai'];
function init() {
kontinent = document.getElementById('kontinent');
land = document.getElementById('land');
kontinente.forEach((item) => {
let newElem = document.createElement('option');
newElem.setAttribute('value', item);
newElem.textContent = elem;
kontinent.appendChild(newElem);
});
kontinent.addEventListener('input', () => {
let currentVal = kontinent.value;
switch (currentVal) {
case 'Europa':
removeChildren;
addCountries(currentVal);
break;
case 'Asien':
removeChildren;
addCountries(currentVal);
break;
case 'Afrika':
removeChildren;
addCountries(currentVal);
break;
}
});
}
function addCountries(currentVal) {
if(currentVal == 'Europa') {
europa.forEach((item) => {
let newElem = document.createElement('option');
newElem.setAttribute('value', item);
newElem.textContent = item;
land.appendChild(newElem);
});
}
if(currentVal == 'Asien') {
asien.forEach((item) => {
let newElem = document.createElement('option');
newElem.setAttribute('value', item);
newElem.textContent = item;
land.appendChild(newElem);
});
}
if(currentVal == 'Afrika') {
afrika.forEach((item) => {
let newElem = document.createElement('option');
newElem.setAttribute('value', item);
newElem.textContent = item;
land.appendChild(newElem);
});
}
}
function removeChildren() {
while(land.firstChild) {
land.removeChild(land.firstChild);
}
}VG
rzscout