Javascript-forum

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>

Vielleicht ist jemand so nett und hilft mir.

Danke

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

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

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

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

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

Visierhoch

admin

Visierhoch

Gast

admin

rzscout