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

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

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

必要なもの

Laravel インストール済みの環境
関連記事
「Link To Share」は、あらゆるマーケティング機能を備えたプラットフォーム。簡単かつプロフェッショナルに、あなたのコンテンツへユーザーを誘導します。
• モダンで自由度の高いプロフィール（Bio）ページ • 高度な分析機能を備えたリンク短縮 • ブランドを印象付けるインタラクティブQRコード • 静的サイトのホスティングとコード管理 • ビジネスを強化する多彩なウェブツール
jQuery ライブラリ
MySQL データベース

ここでは、簡単な例として「国」と「都市」の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 分の読み

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

必要なもの

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

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

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

create_countries_table マイグレーション

create_cities_table マイグレーション

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

CountrySeeder の作成

CitySeeder の作成

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

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

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

ステップ 7: 動作確認

まとめ

次を読む

jQuery 基本ガイド

WordPress データベースの完全ガイド

CSS 基本ガイド

CSSの基本と活用法

輝く肌を作る方法

ガンの種類と特徴

`create_countries_table` マイグレーション

`create_cities_table` マイグレーション