[JavaScript] - Eine Select/Option füllt die Nächste?

[cppnap]

Guten Tag,

stehe gerade von einem (eigentlich denke ich recht einfachen) Problem. Ich habe Select-Bereiche, welche durch den Inhalt der Datenbank gefüllt werden.

Der erste Select-Bereich dient dazu eine bestimmte Produktgruppe auszuwählen und der 2te Select-Bereich soll von dieser ausgewählten Gruppe die entsprechenden Kategorien aufschlüsseln. Der erste Bereich wird beim Laden der Seite gefüllt, was auch erfolgreich funktioniert.

Mein Problem ist jetzt quasi, dass der 2te Bereich nicht mit den Kategorien gefüllt wird, sobald ich im ersten Bereich etwas ausgewählt habe.

$(document).ready(function() {
        $('#infosheet_overview_btn').click(function() {
            loadInfoSheetsOverview();            
        });
    });

function infogroupfunction(ID) {
    var id = document.getElementById(ID);
    id.innerHTML = "";
    $.ajax( {
        type: "GET",
        url: "infoGroupOverview",
        dataType: "json",
        success: function(data) {
            for(var i = 0; i < data.length; i++) {
                var newOption = document.createElement("option");
                newOption.value = data[i].id;
                newOption.innerHTML = data[i].name;
                id.options.add(newOption);
            }
        }
    });
}

$('#chooseInfoGroup2').change(function() {
        $('#chooseInfoCategorie').empty();
        $('#chooseInfoCategorie').append("<option> -- Auswählen -- </option>");
        $('#chooseInfoCategorie').append("<option>test</option>");
    });

Wenn ich jetzt eine Änderung der ersten Selectbox "chooseInfoGroup2" vornehme passiert in der 2ten Selectbox "chooseInfoCategorie rein gar nichts"

Wo liegt denn hier das Problem?

Vielen Dank schon mal

 

[NullPointer]

Zwei Möglichkeiten fallen mir spontan ein:

* Der Event-Handler ist nicht korrekt angebracht (z. B. weil der Code, der ihn anbringen soll, ausgeführt wird, bevor das DOM fertig ist). Du kannst das testen, indem du den Code auf der Konsole ausführst. Klappt es danach, hast du den Grund. Abhilfe: Den Code in den $(document).ready()-Block verschieben.

* Das change-Event funktioniert nicht so wie erwartet. In diesem Fall könntest du stattdessen mit dem click-Event arbeiten.

 

[cppnap]

@NullPointer

Danke erst mal für deine Schnelle Abhilfe, die auch Wirkung gezeigt hat

Das Event hat funktioniert, der Code hat wirklich sofort funktioniert als ich das Script einfach ans Ende der HTML-Datei verschoben habe.

Meine grundlegende Frage wäre jetzt noch wie genau du das meintest, dass ich den Code in der Konsole ausführen soll bzw. worauf ich darauf achten muss, dass ich so etwas in Zukunft sofort selbst heraus finden kann.

Vielen Dank nochmal

 

[T0a5tbr0t]

In den meisten Browsern einfach per F12 (oder Menü) die Entwicklertools öffnen, da hast du eine JS Konsole, Debugger etc.