Comment créer ajax Comment créer une liste déroulante dépendante d'ajax dans Laravel 11

Dans ce tutoriel, je vais vous apprendre à créer une liste déroulante dépendante d'Ajax dans l'application Laravel 11. nous créerons une liste déroulante dépendante dynamique pour la sélection du pays, de l'état et de la ville dans Laravel 11.

Qu'est-ce que la liste déroulante dépendante ?
Une liste déroulante dépendante est un type de menu dans lequel les options disponibles dans un menu déroulant dépendent du choix effectué dans un autre menu déroulant. Par exemple, si vous choisissez « Fruit » dans la première liste déroulante, les options de la deuxième liste déroulante pourraient être « Pomme », « Banane » et « Orange ». Mais si vous choisissez « Légume » dans la première liste déroulante, les options de la deuxième liste déroulante peuvent devenir « Carotte », « Brocoli » et « Tomate ». Vous pouvez apprendre Laravel 11 Générer et lire le didacticiel de fichiers XML de plan de site

Dans cet exemple, nous allons créer des tableaux pour le pays, l'état et la ville. Ensuite, nous ajouterons des données factices à ces tables à l'aide d'un seeder de base de données. Après cela, nous créerons un formulaire avec trois cases de sélection pour le pays, l'état et la ville. Lorsque l'utilisateur sélectionne un pays, la zone de sélection de l'état se remplira en fonction du pays sélectionné. Ensuite, une fois que l'utilisateur a sélectionné un état, la zone de sélection de la ville se remplira en fonction de l'état sélectionné. Voyons donc le code simple étape par étape pour les listes déroulantes dépendantes dynamiques.

Étape pour Comment créer une liste déroulante dépendante d'Ajax dans Laravel 11 ?

Étape 1 : Installer Laravel 11

Tout d'abord, nous devons obtenir une nouvelle application version Laravel 11 à l'aide de la commande ci-dessous car nous partons de zéro. Alors, ouvrez votre terminal ou votre invite de commande et exécutez la commande ci-dessous :

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

Vous pouvez lire Comment télécharger une image avec Summernote dans le didacticiel Laravel 11

Étape 2 : Créer une migration

Dans cette étape, nous allons créer des migrations pour les tables de pays, d'états et de villes. Exécutons donc la commande ci-dessous pour créer des tables.

php artisan make:migration create_countries_states_cities_tables

Ensuite, mettez simplement à jour le code ci-dessous dans le fichier de migration.

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');
    }
};

Lire la suite

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!