极客笔记MySQL Laravel 动态下拉菜单 – 国家和省份
在本文中，我们将介绍如何使用 MySQL 和 Laravel 创建动态下拉菜单，以显示国家和省份的列表。这种技术在许多 Web 应用程序中使用，例如注册表单，位置选择器等等。
阅读更多：MySQL 教程
第一步 – 准备数据库
首先，我们需要准备数据库。我们需要创建两个表，一个用于存储国家，另一个用于存储省份。以下是我们使用 MySQL 创建表的 SQL 语句：
-- Countries table
CREATE TABLE IF NOT EXISTS `countries` (
`id` INT AUTO_INCREMENT PRIMARY KEY,
`name` VARCHAR(255) NOT NULL
);
-- States table
CREATE TABLE IF NOT EXISTS `states` (
`id` INT AUTO_INCREMENT PRIMARY KEY,
`name` VARCHAR(255) NOT NULL,
`country_id` INT NOT NULL,
FOREIGN KEY (`country_id`) REFERENCES `countries`(`id`)
);
这将创建两个表，一个用于存储国家，另一个用于存储省份。在省份表中，我们使用了一个外键 (country_id)，将它与国家表中的 ID 字段相关联。
第二步 – 准备 Laravel
现在我们需要准备 Laravel。我们需要使用 Laravel 的迁移功能，创建我们之前在 MySQL 中创建的两个表。我们可以使用以下命令创建迁移：
php artisan make:migration create_countries_table
php artisan make:migration create_states_table
在两种情况下，我们需要在生成的迁移中添加必要的字段。在迁移文件中，我们应该将 up() 方法中的内容替换为以下内容:
public function up()
{
Schema::create('countries', function (Blueprint table) {table->id();
table->string('name');table->timestamps();
});
Schema::create('states', function (Blueprint table) {table->id();
table->string('name');table->unsignedBigInteger('country_id');
table->foreign('country_id')->references('id')->on('countries');table->timestamps();
});
}
这些迁移文件将创建我们之前创建的两个表，并添加必要的列和键。现在，我们使用以下命令运行迁移:
php artisan migrate
这将创建我们之前创建的两个表。
第三步 – 准备实际的下拉框
此时，我们需要在我们的网站中添加两个下拉框，用于选择国家和省份。我们将使用 Laravel 的 Blade 模板引擎来构建视图。
在视图中，我们将创建两个下拉框。我们将使用 jQuery 来加载国家和省份列表，并将它们动态填充到下拉框中。此外，我们还将使用 jQuery 来实现选择省份时，下拉框的自动填充功能。
以下是 Laravel 视图代码的示例：
<div class="form-group">
<label for="country">Country:</label>
<select class="form-control" id="country">
<option value="">-- Select Country --</option>
@foreach (countries ascountry)
<option value="{{ country->id }}">{{country->name }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="state">State:</label>
<select class="form-control" id="state">
<option value="">-- Select State --</option>
</select>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
(document).ready(function() {('#country').change(function() {
var country_id = (this).val();
if(country_id) {.ajax({
url: '/getStates/' + country_id,
type: "GET",
dataType: "json",
success:function(data) {
('#state').empty();('#state').append('<option value="">-- Select State --</option>');
.each(data, function(key, value) {('#state').append('<option value="'+ key +'">'+ value +'</option>');
});
}
});
} else {
('#state').empty();('#state').append('<option value="">-- Select State --</option>');
}
});
('#state').change(function() {
var state_name =(this).val();
$('#state_name').val(state_name);
});
});
</script>
在视图中，我们首先创建了两个空的下拉框 – 一个用于国家，另一个用于省份。然后，我们使用 Blade 的 @foreach 循环来填充国家下拉框。对于每个国家对象，我们将生成一个选项包含国家名称和 ID。
当用户选择国家时，我们使用 jQuery 的 AJAX 功能来获取与所选国家相关联的省份列表。我们向此 URL 发送 GET 请求：/getStates/country_id，在这里 country_id 是用户选择的国家 ID。服务器返回 JSON 格式的省份列表，包含每个省份的 ID 和名称。我们遍历此列表，为每个省份动态创建一个选项，并将其添加到省份下拉框。
最后，我们使用 jQuery 为省份下拉框添加了一个 onchange 事件。当用户选择省份时，我们将省份的名称赋值给 id 为 state_name 的隐藏字段。此字段将在表单提交时提交到服务器。
第四步 – 创建控制器和路由
现在我们需要创建一个控制器和路由，从服务器返回对于 AJAX 请求所需的省份列表。以下是我们在 Laravel 中创建控制器和路由的代码示例：
// web.php
Route::get('/getStates/{country_id}', '[email protected]');
// Controller
class CountryStateController extends Controller
{
public function getStates(country_id)
{states = DB::table("states")->where("country_id",country_id)->pluck("name","id");
return response()->json(states);
}
}
在此示例中，我们创建了一个名为 CountryStateController 的控制器。控制器包含一个名为 getStates() 的方法，该方法接收国家 ID 作为参数，并返回与该国家相关联的省份列表。我们使用 Laravel 的内置 DB 类，查询当前国家 ID 相关联的所有省份。然后，我们将这些省份的名称和 ID 作为 JSON 格式返回到浏览器。在路由中，我们将这个方法的 URL 映射到 /getStates/{country_id}。当浏览器向此 URL 发送 AJAX 请求时，Laravel 将调用此方法。
总结
在本文中，我们介绍了如何使用 MySQL 和 Laravel 创建动态下拉菜单，以获取国家和省份列表。我们使用 jQuery 的 AJAX 功能来加载并动态填充省份列表。我们还学习了如何使用 Laravel 的 Blade 模板引擎、控制器和路由来实现这种技术。现在，您已经掌握了创建动态下拉框的方法，可以将其用于常见的 Web 应用程序中的许多情况下。