プログラミング

Laravel と jQuery で動的ドロップダウン

最終更新： 17/04/2025
1 分の読み

Laravel と jQuery を使用してドロップダウンリスト（Dropdown lists）を作成する方法

Laravel と jQuery を使用して、動的に内容が更新されるドロップダウンリスト（階層型選択肢）を作成する方法について、詳しく解説します。例えば、ユーザーが選択した国に応じて、その国に関連する都市を表示するドロップダウンリストを作成するシナリオを考えてみましょう。

必要なもの

ここでは、簡単な例として「国」と「都市」の2つのドロップダウンリストを作成します。ユーザーが国を選択すると、その国に関連する都市が2番目のドロップダウンに動的に表示されるようにします。

ステップ 1: Laravel プロジェクトの準備

まず、Laravel プロジェクトを作成します。まだプロジェクトを作成していない場合は、以下のコマンドで新規作成します。

bash
composer create-project --prefer-dist laravel/laravel dropdownExample

その後、dropdownExample フォルダに移動します。

bash
cd dropdownExample

ステップ 2: データベースとマイグレーションの設定

次に、必要なデータベースのテーブルを作成します。ここでは、countries テーブルと cities テーブルを作成します。countries テーブルには国の情報を、cities テーブルには各国の都市の情報を格納します。

マイグレーションファイルの作成

以下のコマンドでマイグレーションを作成します。

bash
php artisan make:migration create_countries_table --create=countries
php artisan make:migration create_cities_table --create=cities

作成されたマイグレーションファイルを以下のように編集します。

create_countries_table マイグレーション

php
public function up()
{
    Schema::create('countries', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->timestamps();
    });
}

create_cities_table マイグレーション

php
public function up()
{
    Schema::create('cities', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->unsignedBigInteger('country_id');
        $table->foreign('country_id')->references('id')->on('countries')->onDelete('cascade');
        $table->timestamps();
    });
}

次に、マイグレーションを実行してテーブルを作成します。

bash
php artisan migrate

ステップ 3: データの追加

データベースにデータを追加します。例えば、countries テーブルに日本とアメリカを追加し、cities テーブルには各国の都市を追加します。

CountrySeeder の作成

bash
php artisan make:seeder CountrySeeder

CountrySeeder.php に以下のデータを追加します。

php
public function run()
{
    DB::table('countries')->insert([
        ['name' => '日本'],
        ['name' => 'アメリカ']
    ]);
}

CitySeeder の作成

bash
php artisan make:seeder CitySeeder

CitySeeder.php に以下のデータを追加します。

php
public function run()
{
    DB::table('cities')->insert([
        ['name' => '東京', 'country_id' => 1],
        ['name' => '大阪', 'country_id' => 1],
        ['name' => 'ニューヨーク', 'country_id' => 2],
        ['name' => 'ロサンゼルス', 'country_id' => 2]
    ]);
}

次に、シーダーを実行してデータをデータベースに挿入します。

bash
php artisan db:seed --class=CountrySeeder
php artisan db:seed --class=CitySeeder

ステップ 4: コントローラーの作成

次に、国と都市を管理するためのコントローラーを作成します。

bash
php artisan make:controller LocationController

LocationController.php を以下のように編集します。

php
use App\Models\Country;
use App\Models\City;
use Illuminate\Http\Request;

class LocationController extends Controller
{
    public function index()
    {
        $countries = Country::all();
        return view('welcome', compact('countries'));
    }

    public function getCities(Request $request)
    {
        if ($request->ajax()) {
            $cities = City::where('country_id', $request->country_id)->get();
            return response()->json($cities);
        }
    }
}

ステップ 5: ルートの設定

web.php にルートを追加します。

php
use App\Http\Controllers\LocationController;

Route::get('/', [LocationController::class, 'index']);
Route::get('get-cities', [LocationController::class, 'getCities']);

ステップ 6: ビューの作成

次に、ドロップダウンリストを表示するためのビューを作成します。resources/views/welcome.blade.php を以下のように編集します。

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ドロップダウンリストの例title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
head>
<body>
    <h1>国と都市の選択h1>
    <form action="">
        <label for="country">国:label>
        <select id="country" name="country_id">
            <option value="">国を選択してくださいoption>
            @foreach ($countries as $country)
                <option value="{{ $country->id }}">{{ $country->name }}option>
            @endforeach
        select>

        <label for="city">都市:label>
        <select id="city" name="city_id">
            <option value="">都市を選択してくださいoption>
        select>
    form>

    <script>
        $(document).ready(function() {
            $('#country').change(function() {
                var country_id = $(this).val();
                if (country_id) {
                    $.ajax({
                        url: '/get-cities',
                        type: 'GET',
                        data: { country_id: country_id },
                        success: function(data) {
                            $('#city').empty();
                            $('#city').append('');
                            $.each(data, function(key, value) {
                                $('#city').append(' + '">' + value.name + '');
                            });
                        }
                    });
                } else {
                    $('#city').empty();
                    $('#city').append('');
                }
            });
        });
    script>
body>
html>

ステップ 7: 動作確認

以上で準備が整いました。Laravel サーバーを起動して動作を確認します。

bash
php artisan serve

ブラウザで http://localhost:8000 にアクセスすると、国のドロップダウンリストが表示され、国を選択することでその国に対応する都市が表示されるはずです。

まとめ

このように、Laravel と jQuery を使用して、動的に更新されるドロップダウンリストを作成することができます。AJAX を使用することで、ユーザーが選択した値に基づいてサーバーからデータを取得し、ページのリロードなしで結果を表示することができます。この手法を使えば、他の動的なフォームやコンテンツにも応用可能です。

最終更新： 17/04/2025
1 分の読み
Back to top button