Wie erstelle ich kaskadierende Dropdown-Listen ohne Datenbank?

Kaskadierende Dropdowns ohne Datenbank auswählen

Problem:

In einem Formular benötigen Sie zwei Dropdowns, in denen die Optionen von Das zweite Dropdown-Menü hängt von der Auswahl im ersten Dropdown-Menü ab, alles ohne Verwendung einer Datenbank.

Lösung:

Trotz der Datenbankmethode erfahren Sie hier, wie Sie dies ohne Verwendung erreichen können eins:

HTML-Markup:

<code class="html"><select id="primary-dropdown">
    <option value="0">None</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
</select>

<select id="secondary-dropdown">
    <option value="0" selected>None</option>
</select></code>

JavaScript/jQuery:

<code class="javascript">$(document).ready(function() {
    var options = {
        1: ["Smartphone", "Charger"],
        2: ["Basketball", "Volleyball"],
        3: ["Apple", "Orange"],
        4: ["Dog", "Cat"]
    };

    $("#primary-dropdown").on("change", function() {
        var selected = $(this).val();
        $("#secondary-dropdown").empty();
        $.each(options[selected], function(i, option) {
            $("#secondary-dropdown").append("<option value='" + (i + 1) + "'>" + option + "</option>");
        });
    });
});</code>

Erklärung:

• Wir definieren ein Objekt namens Optionen, um die Zuordnungen zwischen den primären Dropdown-Werten und den entsprechenden sekundären Dropdown-Optionen zu speichern.
• Wenn sich der primäre Dropdown-Wert ändert, leeren wir die sekundäres Dropdown-Menü und Schleife durch das Optionsobjekt.
• Für den ausgewählten primären Dropdown-Wert hängen wir die entsprechenden Optionen an das sekundäre Dropdown-Menü an.

Mit dieser Lösung können Sie kaskadierende Dropdowns ohne erstellen auf eine Datenbank angewiesen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich kaskadierende Dropdown-Listen ohne Datenbank?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!