This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Wie übergebe ich den Wert aus einem Select Feld an eine Variable?
#1
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
Zitieren
#2
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
Als Lösung markieren Zitieren
#3
Hallo,
und ganz herzlichen dank für die Lösung.
Dann kann ich jetzt die Länder eintragen.
Als Lösung markieren Zitieren
#4
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
Als Lösung markieren Zitieren
#5
Man könnte auch die Option Elemente erstellen mit createElement und createTextNode
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Als Lösung markieren Zitieren
#6
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
Als Lösung markieren Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste