Wie erstelle ich dynamische kaskadierende Dropdown-Boxen mit jQuery und AJAX?

Dynamische kaskadierende Dropdown-Boxen

Dieses Beispiel zeigt die Erstellung einer dynamischen Dropdown-Box, die die zweite Dropdown-Box basierend auf füllt die Auswahl des ersten Dropdown-Feldes, als erforderlich.

Erklärung:

1. Erstes Dropdown-Feld:

   • Enthält Optionen, die der Benutzer auswählen kann.
   • Wenn der Benutzer ein Element auswählt, wird die Änderung ausgelöst Ereignis.

2. jQuery/AJAX:

   • Das Änderungsereignis löst eine AJAX-Anfrage an eine separate PHP-Datei (z. B. , update.php).
   • Der ausgewählte Wert aus dem ersten Dropdown-Feld wird zusammen mit gesendet Anfrage.

3. update.php:

   • Erhält den ausgewählten Wert aus dem ersten Dropdown-Feld.
   • Führt eine Abfrage aus, um relevante Optionen für das zweite Dropdown-Feld abzurufen.
   • Formatiert die Daten in JSON-Format und gibt es an den AJAX-Aufruf zurück.

4. AJAX-Erfolgsfunktion:

   • Empfangt die JSON-Antwort und füllt sie aus das zweite Dropdown-Feld mit dem entsprechenden Optionen.

Beispiel Code:

tester.php:

<select name="gender"></select>

update.php:

if (!empty($_GET['id']) && !empty($_GET['value'])) {
    $id = $_GET['id'];
    $value = $_GET['value'];

    $sql = "SELECT * FROM `category` WHERE `master` = ?";
    $statement = $objDb->prepare($sql);
    $statement->execute(array($value));
    $list = $statement->fetchAll(PDO::FETCH_ASSOC);

    if (!empty($list)) {
        $out = array('<option value="">Select one</option>');

        foreach ($list as $row) {
            $out[] = '<option value="' . $row['id'] . '">' . $row['name'] . '</option>';
        }

        echo json_encode(array('error' => false, 'list' => implode('', $out)));
    } else {
        echo json_encode(array('error' => true));
    }
} else {
    echo json_encode(array('error' => true));
}

Mechanismus:

1. Wenn ein Benutzer eine Option auswählt Im ersten Dropdown-Feld wird sein Wert erfasst.
2. Es wird eine AJAX-Anfrage an update.php gestellt, die den ausgewählten Wert enthält.
3. update.php ruft die entsprechenden Optionen für den zweiten Drop ab -down-Feld und gibt sie im JSON-Format zurück.
4. Die AJAX-Erfolgsfunktion aktualisiert die ausgewählten Optionen im zweiten Dropdown-Feld und macht es so dynamisch.

Indem Sie diese Schritte befolgen, können Sie kaskadierende Dropdown-Felder erstellen, die eine benutzerfreundliche und reaktionsfähige Oberfläche für die Datenauswahl bieten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich dynamische kaskadierende Dropdown-Boxen mit jQuery und AJAX?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!