Laravel 9中如何将省市区下拉框名称而非ID存入数据库

核心需求 #

1. 提交注册表单时，数据库存储国家/州/城市名称而非ID
2. 监听国家下拉框变化时，获取选中的国家名称而非ID

一、将地区名称存入数据库（两种方案） #

方案1：前端直接提交名称（简单但需注意数据安全） #

直接修改下拉框的value为地区名称，提交时直接存入数据库：

1. 修改视图中的国家下拉框（RegistrationForm.blade.php）

<select id="country" name="country">
    <option value="">选择国家</option>
    @foreach($country as $c)
        {{-- 将value从country_id改为country_name --}}
        <option value="{{ $c->country_name }}">{{ $c->country_name }}</option>
    @endforeach
</select>

2. 修改Ajax渲染州/城市的代码

// 国家联动州的success回调
$.each(result.state, function(key, value) {
    // 将option的value改为state_name
    $('#state').append('<option value="' + value.state_name + '">' + value.state_name + '</option>');
});

// 州联动城市的success回调
$.each(result.city, function(key, value) {
    // 将option的value改为city_name
    $('#city').append('<option value="' + value.city_name + '">' + value.city_name + '</option>');
});

3. 注册控制器直接接收名称存入

public function store(Request $request)
{
    // 验证字段
    $request->validate([
        'country' => 'required',
        'state' => 'required',
        'city' => 'required',
        // 其他注册字段规则
    ]);

    // 直接存入名称
    DB::table('users')->insert([
        'country' => $request->country,
        'state' => $request->state,
        'city' => $request->city,
        // 其他字段
        'created_at' => now(),
        'updated_at' => now(),
    ]);

    return redirect()->back()->with('success', '注册成功');
}

方案2：后端根据ID查询名称后存入（安全推荐） #

前端仍提交ID，后端通过ID查询对应名称存入，避免前端篡改数据：

注册控制器处理代码

use App\Models\State;
use App\Models\City;
use Illuminate\Support\Facades\DB;

public function store(Request $request)
{
    $request->validate([
        'country' => 'required|exists:countries,country_id',
        'state' => 'required|exists:states,state_id',
        'city' => 'required|exists:cities,city_id',
        // 其他字段规则
    ]);

    // 根据ID查询名称
    $countryName = DB::table('countries')->where('country_id', $request->country)->value('country_name');
    $stateName = State::where('state_id', $request->state)->value('state_name');
    $cityName = City::where('city_id', $request->city)->value('city_name');

    // 存入数据库
    DB::table('users')->insert([
        'country' => $countryName,
        'state' => $stateName,
        'city' => $cityName,
        // 其他字段
        'created_at' => now(),
        'updated_at' => now(),
    ]);

    return redirect()->back()->with('success', '注册成功');
}

二、监听国家下拉框变化时获取名称 #

修改jQuery的#country change事件，获取选中选项的文本内容：

$('#country').change(function () {
    // 获取选中的国家名称（替代原有的cid = this.value）
    var countryName = $(this).find("option:selected").text();
    alert(countryName); // 测试输出

    // 原有联动州的Ajax代码可保留，如需传递名称给后端修改data参数即可
    $.ajax({
        url: "getstate",
        type: "POST",
        dataType: "json", // 原代码datatype拼写错误，需改为dataType
        data: {
            country_id: this.value, // 联动州仍需要ID，保留该参数
            // 如需传递名称给后端，添加以下参数
            // country_name: countryName
        },
        success: function(result) {
            $('#state').html('<option value="">Select State</option>');
            $.each(result.state, function(key, value) {
                $('#state').append('<option value="' +value.state_id+ '">' +value.state_name+ '</option>');
            });
        },
        error: function(xhr) { // 原代码errror拼写错误，需改为error
            console.log(xhr.responseText);
        }
    });
});

额外修正：原代码拼写错误 #

你的jQuery代码中存在两处拼写错误，需修正：

1. datatype → dataType（jQuery Ajax的参数名区分大小写）
2. errror → error（错误回调函数名拼写错误）

内容的提问来源于stack exchange，提问作者Huzaifa Ahmed