<select>, das sich basierend auf dem Wert eines anderen <select>-Elements ändert

Question

Im Grunde genommen versuche ich die Optionen in #2 basierend auf dem Inhalt von zu ändern und wiederum zeigt dieses zweite ein drittes

Ich habe mir den Kopf zerbrochen, um das zu verwenden, was ich von einer vorherigen Frage bekommen habe, bei der ein mit Hilfe von PHP die angezeigte Seite ändert. Aber als ich versuchte, es an das anzupassen, was ich jetzt tun möchte, hat es nicht funktioniert, weil ich erstens ein Formular in einem Formular platzieren würde und das ist keine gute Idee, und zweitens die Methode, mit der es den zweiten Inhalt ändert, ist durch onchange="this.form.submit(), was das gesamte Formular sendet, anstatt nur den zweiten Inhalt zu ändern. Nach einiger Recherche habe ich ähnliche Anfragen auf dieser Website gefunden, aber die, die ich gefunden habe, waren von Leuten, die nur zwei Sätze von Inhalten haben wollten, darunter Länder und Staaten, und das würde für mich nicht funktionieren, weil ich 3 Sätze von Auswahlfeldern benötige. Hier ist, was ich in vereinfachter Form benötige: Etwas auswählen Das Auswählen zeigt select1 an Das Auswählen zeigt select2 an

---

        Dies zeigt sub1select1 an
        Dies zeigt sub1select2 an

             La Dee Da
             La Dee Da

             La Dee Da
             La Dee Da

---

        Dies zeigt sub2select1 an
        Dies zeigt sub2select2 an

             La Dee Da
             La Dee Da

             La Dee Da
             La Dee Da

Ich habe einen Weg gefunden, dies mit jQuery zu tun aber es zeigt nur, wie man dies mit 2 macht. Ich habe versucht, es zu ändern, jedoch ohne Erfolg. Hier ist der Code: $('select[name="topselect"]').change(function(){ $('.hidden').hide(); if(this.value == 1){ $('select[name="select1"]').toggle(); } else if(this.value == 2){ $('select[name="select2"]').toggle(); } }); Ich habe nicht class="hidden" hinzugefügt, das die Auswahlfelder ausblenden würde. Ich schätze die Hilfe! Danke!

Answer 1

Hier ist ein Start für dich: jsFiddle Beispiel

Ich habe dein HTML ein wenig modifiziert, um es intuitiver zu gestalten. Hier ist das HTML und jQuery:

HTML

    Etwas auswählen
    Bei Auswahl wird select1 angezeigt
    Bei Auswahl wird select2 angezeigt

    Etwas auswählen
    Das zeigt sub1select1 an
    Das zeigt sub1select2 an

    sub1select1 La Dee Da
    sub1select1 La Dee Da

    sub1select2 La Dee Da
    sub1select2 La Dee Da

    Etwas auswählen
    Das zeigt sub2select1 an
    Das zeigt sub2select2 an

    sub2select1 La Dee Da
    sub2select1 La Dee Da

    sub2select2 La Dee Da
    sub2select2 La Dee Da

jQuery

$('select[name="topselect"]').change(function () {
    $('.hidden, .hidden_1, .hidden_2').hide();
    if (this.value == 1) {
        $('select[name="select1"]').toggle();
    } else if (this.value == 2) {
        $('select[name="select2"]').toggle();
    }
});
$('select[name="select1"]').change(function () {
    $('.hidden_2').hide();

    if ($(':selected', this).index() == 1) {
        $('select[name="sub1select1"]').toggle();
    } else if ($(':selected', this).index() == 2) {
        $('select[name="sub1select2"]').toggle();
    }
});
$('select[name="select2"]').change(function () {
    $('.hidden_2').hide();

    if ($(':selected', this).index() == 1) {
        $('select[name="sub2select1"]').toggle();
    } else if ($(':selected', this).index() == 2) {
        $('select[name="sub2select2"]').toggle();
    }
});

Basierend auf deinen genauen Anforderungen könnte dies noch etwas optimiert werden.

Answer 2

Auch Ihr HTML wurde etwas geändert. Optimiert. http://jsfiddle.net/mwk97/

jQuery

$('document').ready(function() {
    var currentList;    
    $('select[name="topselect"]').on('change', function () {
        $('select:not("[name=topselect]")').hide();
        currentList = this.value;
        $('select[name="select'+currentList+'"]').show();
    });
    $('.subselect').on('change', function() {
        $('.subsub').hide();
        var nameSelector = '[name="sub' + currentList + 'select' + this.value + '"]';
        $('select'+nameSelector).show();
    });
});

HTML

    Wählen Sie etwas aus
    Wenn Sie dieses auswählen, wird select1 angezeigt
    Wenn Sie dieses auswählen, wird select2 angezeigt

    Wählen Sie etwas aus
    Dies zeigt sub1select1 an
    Dies zeigt sub1select2 an

    La Dee Da 11
    La Dee Da 11

    La Dee Da 12
    La Dee Da 12

    Wählen Sie etwas aus
    Dies zeigt sub2select1 an
    Dies zeigt sub2select2 an

    La Dee Da 21
    La Dee Da 21

    La Dee Da 22
    La Dee Da 22

Und natürlich nur ein wenig...

CSS

.subselect { display: none; }
.subsub { display: none; }