Javascript Daten auf der Seite

Question

Ich habe eine Webseite mit 2 Listenfeldern (HTML Select-Steuerelement). Das erste Listenfeld ist mehrfach auswählbar und enthält eine große Anzahl von Elementen.

Wenn ich ein oder mehrere Elemente im ersten Listenfeld auswähle, muss sich der Inhalt des zweiten Listenfelds basierend auf den ausgewählten Werten ändern. Diese Werte müssen aus der Datenbank stammen. Da die Auswahl sofort funktionieren muss, muss ich dies alles auf der Client-Seite ohne Rückruf/Postback erledigen. Das bedeutet, den Inhalt der Datenbank beim Laden der Seite einzufügen und ihn mit JQuery zu verarbeiten.

Welchen Ansatz schlagen Sie vor, um solche Daten auf der Seite zu speichern? Können Sie mich auf eine vorhandene Lösung hinweisen?

Ich weiß nicht einmal, wie ich das googeln soll.

Answer 1

Ich würde ein Objekt erstellen, das die verschiedenen Elemente in Arrays enthält. Beispiel:

var values = {
    cat1: ["item1", "item2", ...],
    cat2: ["item1", "item2", ...]
}

Wenn ein Element aus dem ersten select ausgewählt wird, suchen Sie diesen Wert mit values[selectedValue], der Ihnen die Elemente für das andere select-Feld liefert. Dann müssen Sie nur noch das HTML dafür generieren.

Answer 2

    Test

    // Einfaches Plugin, das zwei Arrays vergleicht
    jQuery.fn.compare = function(t) {
        if (this.length != t.length) { 
            return false; 
        }
        var a = this.sort(),
            b = t.sort();
        for (var i = 0; t[i]; i++) {
            if (a[i] !== b[i]) { 
                return false;
            }
        }
        return true;
    };

    // Diese Regeln sollten vom Server abgerufen werden
    var rules = [ 
        // Wähle den ersten Wert aus, wenn 1, 2 und 5 ausgewählt sind
        { value: '1', selectedValues: [ '1', '2', '5' ] }, 
        // Wähle den zweiten Wert aus, wenn 2 und 4 ausgewählt sind
        { value: '2', selectedValues: [ '2', '4' ] }, 
        // Wähle den dritten Wert aus, wenn 3 ausgewählt ist
        { value: '3', selectedValues: [ '3' ] }
    ];

    $(function() {
        // Immer wenn sich die Auswahl im Multiselect-Feld ändert:
        $('#first').change(function() {
            // Holen Sie sich das Array aller ausgewählten Elemente
            var selectedValues = $(this).val();

            // Überprüfen Sie, ob dieses Array mit einer der definierten Regeln übereinstimmt
            $(rules).each(function(index, rule) {
                if ($(selectedValues).compare(rule.selectedValues)) {
                    // Wenn wir eine Übereinstimmung haben, wählen Sie den entsprechenden Wert in der zweiten Liste aus
                    $('#second').val(rule.value);
                }
            })
        });
    });

    Wert1
    Wert2
    Wert3
    Wert4
    Wert5

    Wert1
    Wert2
    Wert3

Answer 3

Sie sollten jQuery verwenden, um Daten beim Klicken abzurufen.

Vielleicht hilft Ihnen dieser Leitfaden weiter:
http://www.akchauhan.com/select-content-from-one-list-to-another-using-jquery/

Erfahren Sie hier mehr über jQuery: http://docs.jquery.com/Tutorials