MySQL Laravel 动态下拉选择菜单（country和state）

在本文中，我们将介绍如何使用MySQL和Laravel框架来创建动态下拉选择菜单。具体来说，我们将使用两个数据表(country和state)，以及一个具有联动效果的下拉菜单来实现这一功能。

阅读更多：MySQL 教程

准备工作

在开始之前，你需要确保以下内容：

本地或远程服务器上已经安装了MySQL数据库。
你已经安装了Laravel框架，并知道如何使用它。
你已经创建了一个新的Laravel项目。如果你还没有创建，请先按照Laravel的官方文档进行操作。

创建数据表

首先，我们需要创建两个数据表：country（国家）和state（州/省/地区）。你可以使用下面的SQL代码将这些表创建到你的MySQL数据库中：

CREATE TABLE `country` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

CREATE TABLE `state` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `country_id` int(11) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `country_id` (`country_id`),
  CONSTRAINT `state_ibfk_1` FOREIGN KEY (`country_id`) REFERENCES `country` (`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `country` (`name`) VALUES ('中国'), ('美国'), ('英国');

INSERT INTO `state` (`name`,`country_id`) VALUES 
('江苏','1'),('浙江','1'),('广东','1'),('纽约','2'),('德克萨斯','2'),('伦敦','3');

配置路由

我们需要在Laravel中创建一个下拉菜单路由并相应地修改路由文件。打开routes/web.php文件并添加以下代码块：

Route::get('country-list','App\Http\Controllers\CountryStateController@countryList');
Route::get('state-list/{id}','App\Http\Controllers\CountryStateController@stateList');

创建控制器

接下来，我们需要创建控制器并相应地修改代码。运行以下命令来创建一个CountryStateController控制器：

php artisan make:controller CountryStateController

现在打开该控制器文件，并添加以下代码块：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Country;
use App\Models\State;

class CountryStateController extends Controller
{
    public function countryList()
    {
         $countries = Country::all(); return view('country-state',compact('countries')); } public function stateList($ id)
    {
         $states = State::select('name','id')->where('country_id',$ id)->get();
        return response()->json($states);
    }
}

创建视图

最后，我们需要创建视图。我们需要在resources/views目录下创建一个名为country-state.blade.php的文件。在该文件中添加如下代码块：

<!DOCTYPE html>
<html>
<head>
    <title>动态下拉选择菜单</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h3>动态下拉选择菜单</h3>
    <div>
        <select name="country" id="country">
            <option value="">选择国家</option>
            @foreach( $countries as$ country)
                <option value="{{ $country->id}}">{{$ country->name}}</option>
            @endforeach
        </select>
    </div>
    <br>

    <div>
        <select name="state" id="state">
            <option value="">选择州/省/地区</option>
        </select>
    </div>

    <script type="text/javascript">
         $('#country').on('change',function(){ var country_id =$ (this).val();
            if(country_id){
                 $.ajax({ type:"GET", url:"{{url('state-list')}}/"+country_id, success:function(res){ if(res){$ ("#state").empty();
                             $("#state").append('<option value="">选择州/省/地区</option>');$ .each(res,function(key,value){
                                 $("#state").append('<option value="'+value.id+'">'+value.name+'</option>'); }); }else{$ ("#state").empty();
                        }
                    }
                });
            }else{
                $("#state").empty();
            }
        });
    </script>
</body>
</html>