Frage DropDown-Liste dynamisch bearbeiten über ein Array

[BetaOps]

Guten Tag liebe Community,

kann mir einer kurz erklären, wie ich am besten an das folgende Problem:

Hintergrund:
Ich muss Standort-Daten aus einer Tabelle holen.(Land/Stadt/Gebäude/Stockwerk/etc)
Das Problem ist, dass ich mehrere DropDown-Listen Generieren muss, die die Werte aus der Tabelle enthält.
Und jetzt wird es kompliziert: Ich muss irgendwie ein Array Generieren dass ich mit JavaScript bearbeiten kann, denn je nach dem was der User in der ersten Liste auswählt muss die nächste Liste dazugehörige Werte entsprechend der Datensätze enthalten.

Sprich wenn Deutschland ausgewählt wird, dann sollen alle Städte in Deutschland in die nächste Liste geschrieben werden.

Nun weiß ich nicht wie ich das machen soll...
Mein PHP-Code sollte alle Datensätze als Array an den Client übergeben und jetzt weiß ich nicht weiter.

Lösungsansatz 1:
Ich suche im Array nach dem ausgewählten und füge das nächste Feld über addOption ein.
Porblem, wie suche ich am besten im Array ? ist es überhaupt ein dimensional ? (Ich kenne nicht die Struktur, die mir von $row = mysqli_fetch_array($rslt,MYSQLI_NUM) gegeben wird )

Lösungsansatz 2:
Ich mache aus dem Array ein String und arbeite mit dem String.

// Alle Inputs mit Event bestücken --> eine Nodelist ist wichtig
var inputArr = document.getElementsByClassName("data");
for (var i = 0 ; i < inputArr.length ; i++){
    inputArr[i].addEventListener("change",searchArr);
}

// 1. Bei Auswahl Funtion aufrufen
// 2. Funktion füllt nächste Liste & wird auf enable gesetzt
// Soll statt finden wenn die Maus vom Element weg bewegt wird ???

function searchArr() {
    var aswhl = this.options[this.selectedIndex].value;
    //var aswhl = this.options[this.selectedIndex].text;
    
    for (var i = 0 ; i < dataArr.length ; i++) {
        // Es soll überprüft werden ob der String enthalten ist im Array
        if(dataArr[i] == aswhl){
            // wenn ja dann soll die nächste Liste aufgefüllt werden
            // mit den Werten aus dataArr
        }
    }
}

function addOption( value, text )
{
    var opt = document.createElement( 'option' );
    opt.value = value;
    opt.appendChild( document.createTextNode( text ) );
    this.appendChild( opt );
};


var dataArr = null;
function getData() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if(this.readyState == 4 && this.status == 200){
            dataArr = JSON.parse( this.responseText);
        }
    };

    xmlhttp.open("POST", "getData.php", true);
    xhttp.setRequestHeader("Content-Standort", "application/x-www-form-urlencoded");
    xmlhttp.send();
}

<?php
//Dieser Teil muss in Weiterleitung, wegen der Sicherheit
                            
include_once("../PHP/sqlConnect.php");
$con = connect();

$table = "Standort";
$sql = "SELECT * FROM ".$table;
$stmt = mysqli_prepare($conn, $query);
mysqli_stmt_execute($stmt) or die("Unable to execute query: " . $stmt->error);
$rslt = mysqli_stmt_get_result($stmt);

if($row = mysqli_fetch_array($rslt,MYSQLI_NUM)){
    echo json_encode($row);                       
}
?>

 

[Tronjer]

Du arbeitest in JS nicht mit assoziativen Arrays, sondern mit JSON-Objekten.

Der erste Schritt ist, ein solches Objekt erstmal zu mocken. Ich hatte vor längerer Zeit mit dem alten Angular ein Beispiel für verkette Select-Listen erstellt.
http://next.plnkr.co/edit/lAYuItnEP...y&utm_medium=worker&utm_campaign=next&preview

 

[BetaOps]

Das wird ja eine Menge Holz sein, wenn es bis zu Gebäuden und noch weiter herunter geht. Da wird es angebracht sein, jeweils nur die benötigten Daten mit Ajax zu holen, also wenn z. B. Deutschland gewählt wird, zunächst nur die Städte zu holen. Dabei wirst Du dich mit Datenbankzugriffen leichter tun als ein mehrdimensionales Array auszuwerten.
Wie das? Wurde die Tabelle von jemand anders eingerichtet? Ohne die Struktur zu kennen, wirst Du die Aufgabe nicht lösen können.

Ich hab ein ERM, aber ich arbeite zum ersten mal mit SQL daher bin ich mit dem Umgang der Daten noch nicht so vertraut
Das ist doch dann ein JASON (zweidimensionales)Array Objekt oder nicht ? Und der erste Eintrag von jedem Datensatz ist doch eine Zahl und mit forEach kann ich über alle Datensätze iterieren ? :S

Der erste Schritt ist, ein solches Objekt erstmal zu mocken. Ich hatte vor längerer Zeit mit dem alten Angular ein Beispiel für verkette Select-Listen erstellt.

Die Firewall blockt den Link, da ich auf der Arbeit bin kann ich es mir leider nicht anschauen :/

 

[BetaOps]

Die beste Lösung für meinen Fall ist:
https://github.com/markjs/jquery-dependent-selects

Falls es jemanden gibt der dass jemals brauchen wird