このチュートリアルでは、laravel 11 アプリケーションで ajax 依存のドロップダウンを作成する方法を説明します。 Laravel 11で国、州、都市を選択するための動的な依存ドロップダウンを作成します。
依存ドロップダウンとは何ですか?
依存ドロップダウンは、あるドロップダウン メニューで使用できるオプションが別のドロップダウン メニューでの選択に依存するメニューのタイプです。たとえば、最初のドロップダウンで「フルーツ」を選択した場合、2 番目のドロップダウンのオプションは「Apple」、「バナナ」、「オレンジ」になる可能性があります。ただし、最初のドロップダウンで「野菜」を選択すると、2 番目のドロップダウンのオプションが「ニンジン」、「ブロッコリー」、「トマト」に変わる可能性があります。 Laravel 11 のサイトマップ XML ファイルの生成と読み取りのチュートリアルを学ぶことができます
この例では、国、州、都市のテーブルを作成します。次に、データベース シーダーを使用してこれらのテーブルにダミー データを追加します。その後、国、州、都市の 3 つの選択ボックスを含むフォームを作成します。ユーザーが国を選択すると、選択した国に基づいて州選択ボックスが入力されます。次に、ユーザーが州を選択すると、選択した州に基づいて都市選択ボックスが入力されます。それでは、動的依存ドロップダウンの簡単なステップバイステップのコードを見てみましょう。
まず、最初から始めるので、以下のコマンドを使用して、新しい Laravel 11 バージョンのアプリケーションを入手する必要があります。したがって、ターミナルまたはコマンド プロンプトを開き、以下のコマンドを実行します。
composer create-project laravel/laravel ajax-dependent-dropdown cd ajax-dependent-dropdown
Laravel 11 チュートリアルで Summernote を使用して画像をアップロードする方法を読むことができます
このステップでは、国、州、都市テーブルの移行を作成します。それでは、以下のコマンドを実行してテーブルを作成しましょう。
php artisan make:migration create_countries_states_cities_tables
次に、移行ファイル内の以下のコードを更新するだけです。
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'); } };
続きを読む
以上がajaxを作成する方法laravel 11でajax依存のドロップダウンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。