如何建立 ajax 如何在 laravel 11 中建立依賴 ajax 的下拉式選單

在本教程中，我將教您如何在 laravel 11 應用程式中建立依賴 ajax 的下拉式選單。我們將在 laravel 11 中為國家、州和城市選擇建立動態依賴下拉式選單。

什麼是依賴下拉式選單？
從屬下拉選單是一種選單類型，其中一個下拉選單中的可用選項取決於另一個下拉選單中所做的選擇。例如，如果您在第一個下拉清單中選擇“水果”，則第二個下拉清單中的選項可能是“蘋果”、“香蕉”和“橘子”。但如果您在第一個下拉清單中選擇“蔬菜”，第二個下拉清單中的選項可能會變更為“胡蘿蔔”、“西蘭花”和“番茄”。你可以學習 Laravel 11 產生和讀取 Sitemap XML 檔案教學

在此範例中，我們將為國家/地區、州/省和城市建立表格。然後我們將使用資料庫播種器向這些表添加一些虛擬資料。之後，我們將建立一個包含國家、州和城市三個選擇框的表單。當使用者選擇一個國家/地區時，州選擇框將根據所選國家/地區進行填充。然後，在使用者選擇一個州後，城市選擇框將根據所選州進行填充。那麼，讓我們來看看動態依賴下拉式選單的簡單逐步程式碼。

如何在 laravel 11 中建立依賴 ajax 的下拉式選單的步驟？

第 1 步：安裝 Laravel 11

首先，我們需要使用下面的命令來獲得一個新的 Laravel 11 版本應用程序，因為我們是從頭開始。因此，打開終端機或命令提示字元並執行以下命令：

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

您可以閱讀 Laravel 11 教學中如何使用 Summernote 進行圖片上傳

第 2 步：建立遷移

在此步驟中，我們將為國家、州和城市表建立遷移。因此，讓我們執行以下命令來建立表。

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中文網其他相關文章！