Giá trị được chọn trong danh sách thả xuống Ajax trong Laravel

Danh sách thả xuống thành phố tiểu bang quốc gia phụ thuộc Laravel với hướng dẫn AJAX. Xuyên suốt hướng dẫn toàn diện này, bạn sẽ xác định cách tạo danh sách thả xuống thành phố của quốc gia phụ thuộc động với sự trợ giúp của jQuery AJAX trong ứng dụng Laravel

Trình đơn thả xuống phụ thuộc là những phần tử giao diện người dùng có giá trị thay đổi hoặc cập nhật dựa trên giá trị của trình đơn thả xuống khác. Trong hướng dẫn này, chúng tôi sẽ xây dựng danh sách thả xuống phụ thuộc bằng AJAX

Đây sẽ là một ví dụ thả xuống của thành phố quốc gia phụ thuộc vào laravel;

Chẳng hạn, bạn phải hiển thị các danh mục phụ dựa trên các danh mục chính;

Trình đơn thả xuống thành phố trạng thái quốc gia năng động dựa trên AJAX này trong laravel sẽ hiển thị thành phố trạng thái quốc gia và các giá trị sẽ thay đổi dựa trên lựa chọn của người dùng

Laravel 9 Ví dụ thả xuống thành phố quốc gia phụ thuộc AJAX

• Bước 1. Tạo dự án Laravel
• Bước 2. Thực hiện kết nối cơ sở dữ liệu
• Bước 3. Tạo mô hình và chạy Migration
• Bước 4. Tạo bộ điều khiển
• Bước 5. Tạo tuyến đường
• Bước 6. Tạo Chế độ xem Blade
• Bước 7. Kiểm tra Quốc gia Bang Thành phố Danh sách thả xuống phụ thuộc

Tạo ứng dụng Laravel

Gọi bước đầu tiên bằng cách cài đặt một dự án laravel mới;

composer create-project laravel/laravel laravel-dependent-dropdown-example --prefer-dist

Thêm chi tiết cơ sở dữ liệu

Sau đó, mở. env và chèn tên cơ sở dữ liệu, tên người dùng và mật khẩu để tạo kết nối cơ sở dữ liệu với ứng dụng

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=

Nếu bạn đang sử dụng máy chủ cục bộ MAMP trong macO; . tập tin env

UNIX_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock

Tạo chế độ và chạy di chuyển

Tiếp theo, bạn cần tạo mô hình quốc gia, tiểu bang và thành phố cộng với các tệp di chuyển

php artisan make:model Country
php artisan make:model State
php artisan make:model City
php artisan make:migration create_country_state_city_tables

Sau đó, mở cơ sở dữ liệu/di chuyển/create_country_state_city_tables. php và cập nhật đoạn mã sau

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateCountryStateCityTables extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('countries', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('sortname');
            $table->string('phonecode');
            $table->timestamps();
        });
        Schema::create('states', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->integer('country_id');
            $table->timestamps();
        });
        Schema::create('cities', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->integer('state_id');            
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('countries');
        Schema::drop('states');
        Schema::drop('cities');
    }
}

Tiếp theo, bạn cần chạy di chuyển để di chuyển các quốc gia, tiểu bang và thành phố

php artisan migrate

Sau khi di chuyển các bảng quốc gia, tiểu bang và thành phố trong cơ sở dữ liệu. Nhiệm vụ tiếp theo của bạn là điền dữ liệu quốc gia, tiểu bang và thành phố vào các bảng tương ứng

Do đó, bạn có thể sử dụng URL sau để lấy dữ liệu SQL Quốc gia, Bang và Thành phố và nhập trực tiếp vào các bảng để tạo danh sách thả xuống phụ thuộc trong laravel

chuẩn bị bộ điều khiển

Tiếp theo, bạn cần tạo bộ điều khiển thả xuống mới, thực hiện lệnh sau trên màn hình bảng điều khiển

php artisan make:controller DropdownController

Tiếp theo, mở và cập nhật app/Http/Controllers/DropdownController. php

namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use Validator;
use Response;
use Redirect;
use App\Models\{Country, State, City};
class DropdownController extends Controller
{
    public function index()
    {
        $data['countries'] = Country::get(["name", "id"]);
        return view('welcome', $data);
    }
    public function fetchState(Request $request)
    {
        $data['states'] = State::where("country_id",$request->country_id)->get(["name", "id"]);
        return response()->json($data);
    }
    public function fetchCity(Request $request)
    {
        $data['cities'] = City::where("state_id",$request->state_id)->get(["name", "id"]);
        return response()->json($data);
    }
}

Tạo tuyến đường

Tiếp theo, bạn cần khai báo ba tuyến đường sẽ đảm bảo thực hiện các yêu cầu POST và GET để xử lý dữ liệu thả xuống phụ thuộc

Sau đó, mở các tuyến/web. php và cập nhật tệp sau

Tạo Chế độ xem Blade

Phần này giải thích cách tạo cấu trúc HTML thả xuống phụ thuộc và hiển thị động tên tiểu bang và thành phố dựa trên tên quốc gia được người dùng chọn bằng cách sử dụng các tuyến đường của laravel

Do đó, hãy mở tài nguyên/lượt xem/chào mừng. lưỡi. php của bạn, tương tự như vậy, hãy chèn đoạn mã sau vào tệp

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="content">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Dependent AJAX Dropdown Tutorial</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <div class="row justify-content-center">
            <div class="col-md-5">
                <h2 class="mb-4">Laravel AJAX Dependent Country State City Dropdown Example</h2>
                <form>
                    <div class="form-group mb-3">
                        <select  id="country-dd" class="form-control">
                            <option value="">Select Country</option>
                            @foreach ($countries as $data)
                            <option value="{{$data->id}}">
                                {{$data->name}}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mb-3">
                        <select id="state-dd" class="form-control">
                        </select>
                    </div>
                    <div class="form-group">
                        <select id="city-dd" class="form-control">
                        </select>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#country-dd').on('change', function () {
                var idCountry = this.value;
                $("#state-dd").html('');
                $.ajax({
                    url: "{{url('api/fetch-states')}}",
                    type: "POST",
                    data: {
                        country_id: idCountry,
                        _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    success: function (result) {
                        $('#state-dd').html('Select State');
                        $.each(result.states, function (key, value) {
                            $("#state-dd").append('' + value.name + '');
                        });
                        $('#city-dd').html('Select City');
                    }
                });
            });
            $('#state-dd').on('change', function () {
                var idState = this.value;
                $("#city-dd").html('');
                $.ajax({
                    url: "{{url('api/fetch-cities')}}",
                    type: "POST",
                    data: {
                        state_id: idState,
                        _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    success: function (res) {
                        $('#city-dd').html('Select City');
                        $.each(res.cities, function (key, value) {
                            $("#city-dd").append('' + value.name + '');
                        });
                    }
                });
            });
        });
    </script>
</body>
</html>

Kiểm tra thả xuống phụ thuộc Laravel 9

Mọi thủ tục đã được tuân theo;

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=

Sử dụng URL sau để kiểm tra ví dụ thả xuống PHP AJAX country state state city

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=

Phần kết luận

Cuối cùng, chúng tôi đã hoàn thành hướng dẫn thả xuống phụ thuộc vào Laravel này;

Chúng tôi đã lấy tên quốc gia, thành phố và tiểu bang từ cơ sở dữ liệu và hiển thị chúng trong danh sách thả xuống phụ thuộc bằng AJAX

máy đào

Tôi là Digamber, một nhà phát triển full-stack và là người đam mê thể dục. Tôi đã tạo trang web này để truyền kinh nghiệm mã hóa của mình cho các lập trình viên mới. Tôi thích viết trên JavaScript, ECMAScript, React, Angular, Vue, Laravel

Bài viết đề xuất

Laravel 9 Xác thực Giao thức Internet (IPv6) Hướng dẫn Laravel 9 Nhập bản ghi trong SQL với CSV và Seeder Cách triển khai Xác thực tồn tại trong Laravel 9 Form Laravel 9 Livewire Ví dụ về Hướng dẫn tạo Slug mới Laravel 9 Tạo nhiều Slug duy nhất khi tải trang Hướng dẫn Laravel 9 Bootstrap Tags Ví dụ về hệ thống Hướng dẫn Laravel 9 Tạo

Làm cách nào để nhận giá trị thả xuống từ ajax trong laravel?

Làm cách nào để gửi giá trị được chọn thả xuống trong Ajax?

Làm cách nào để sử dụng trình đơn thả xuống trong laravel?

Làm cách nào để tìm nạp dữ liệu trong trình đơn thả xuống từ cơ sở dữ liệu trong laravel?