Wie übergebe ich den Wert aus einem Select Feld an eine Variable?

[Visierhoch]

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:

    <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>

Vielleicht ist jemand so nett und hilft mir.

Danke

[admin]

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

[Visierhoch]

Hallo,
und ganz herzlichen dank für die Lösung.
Dann kann ich jetzt die Länder eintragen.

[Gast]

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

[admin]

Man könnte auch die Option Elemente erstellen mit createElement und createTextNode

[rzscout]

Moin,
ich habe hier eine weitere Variante:

'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