So erstellen Sie Ajax. So erstellen Sie ein Ajax-abhängiges Dropdown in Laravel 11

In diesem Tutorial zeige ich Ihnen, wie Sie ein Ajax-abhängiges Dropdown-Menü in der Laravel 11-Anwendung erstellen. Wir werden in Laravel 11 ein dynamisches abhängiges Dropdown-Menü für die Auswahl von Land, Bundesstaat und Stadt erstellen.

Was ist ein abhängiges Dropdown?
Ein abhängiges Dropdown-Menü ist eine Art Menü, bei dem die in einem Dropdown-Menü verfügbaren Optionen von der in einem anderen Dropdown-Menü getroffenen Auswahl abhängen. Wenn Sie beispielsweise im ersten Dropdown-Menü „Obst“ auswählen, lauten die Optionen im zweiten Dropdown möglicherweise „Apfel“, „Banane“ und „Orange“. Wenn Sie jedoch im ersten Dropdown-Menü „Gemüse“ auswählen, ändern sich die Optionen im zweiten Dropdown-Menü möglicherweise in „Karotte“, „Brokkoli“ und „Tomate“. Sie können das Laravel 11-Tutorial zum Generieren und Lesen von Sitemap-XML-Dateien erlernen

In diesem Beispiel erstellen wir Tabellen für Land, Bundesland und Stadt. Dann fügen wir mithilfe eines Datenbank-Seeders einige Dummy-Daten zu diesen Tabellen hinzu. Anschließend erstellen wir ein Formular mit drei Auswahlfeldern für Land, Bundesland und Stadt. Wenn der Benutzer ein Land auswählt, wird das Feld zur Auswahl des Bundesstaats basierend auf dem ausgewählten Land gefüllt. Nachdem der Benutzer dann einen Bundesstaat ausgewählt hat, wird das Auswahlfeld für die Stadt basierend auf dem ausgewählten Bundesstaat gefüllt. Sehen wir uns also den einfachen Schritt-für-Schritt-Code für dynamische abhängige Dropdowns an.

Schritt zum Erstellen eines Ajax-abhängigen Dropdowns in Laravel 11?

Schritt 1: Installieren Sie Laravel 11

Zuerst müssen wir mit dem folgenden Befehl eine neue Laravel 11-Versionsanwendung herunterladen, da wir bei Null anfangen. Öffnen Sie also Ihr Terminal oder Ihre Eingabeaufforderung und führen Sie den folgenden Befehl aus:

composer create-project laravel/laravel ajax-dependent-dropdown
cd ajax-dependent-dropdown

Wie Sie Bilder mit Summernote hochladen, können Sie im Laravel 11-Tutorial lesen

Schritt 2: Migration erstellen

In diesem Schritt erstellen wir Migrationen für die Tabellen „Länder“, „Staaten“ und „Städte“. Führen wir also den folgenden Befehl aus, um Tabellen zu erstellen.

php artisan make:migration create_countries_states_cities_tables

Als nächstes aktualisieren Sie einfach den Code unten in der Migrationsdatei.

database/migrations/create_countries_states_cities_tables.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up(): void
    {
        Schema::create('countries', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });

        Schema::create('states', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->integer('country_id');
            $table->timestamps();
        });

        Schema::create('cities', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->integer('state_id'); 
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down(): void
    {
        Schema::dropIfExists('countries');
        Schema::dropIfExists('states');
        Schema::dropIfExists('cities');
    }
};

Weiterlesen

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Ajax. So erstellen Sie ein Ajax-abhängiges Dropdown in Laravel 11. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!