MySQL Laravel 动态下拉选择菜单(country和state)

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');
Mysql

配置路由

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

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

创建控制器

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

php artisan make:controller CountryStateController
Mysql

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

<?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);
    }
}
Mysql

创建视图

最后,我们需要创建视图。我们需要在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 ascountry)
                <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>
Mysql

运行项目

现在,我们已经准备好运行我们的项目了。在你的命令行中,进入到你的Laravel项目目录并运行以下命令启动项目:

php artisan serve
Mysql

然后在浏览器中输入http://localhost:8000/country-list来访问你的下拉菜单。你应该能够看到一个包含国家和州/省/地区下拉菜单的页面。当你选择一个国家时,相关的州/省/地区将动态显示在第二个下拉菜单中。

总结

使用MySQL和Laravel框架创建动态下拉选择菜单是一项有用而强大的技能。通过本文,你已经了解了如何使用这两个工具来创建一个具有联动效果的下拉菜单,希望这篇文章对你有所帮助。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程