Laravel多选国家下拉联动获取对应州省代码排查修正求助

已发现的代码错误 #

• 视图层错误
  1. 多选下拉框的name属性未加[]后缀，后端无法接收数组格式的选中值
  2. 城市下拉框的<select>标签未正确闭合，缺少结束符号>
• 控制器层错误
  1. fetchState方法中explode("','", $request->country_id)拆分逻辑错误，前端多选参数直接以数组格式传递，无需手动拆分
  2. fetchCity方法查询语句末尾缺少分号，存在语法错误
  3. fetchCity未适配多选州的场景，使用where只能匹配单个州ID，需要改为whereIn
• 缺失核心逻辑：没有编写JS代码监听下拉框变更事件，无法触发接口请求渲染联动选项

修正后的代码 #

1. Blade视图代码 #

<div class="form-group mb-3">
  <label>Country:</label>
  <div class="col-sm-4">
    <select id="country-dd" name="country[]" class="js-example-basic-multiple form-control" multiple="multiple">
      <option value="">Select Country</option>
      @foreach ($countries as $data)
      <option value="{{$data->id}}">{{$data->name}}</option>
      @endforeach
    </select>
  </div>
</div>
<div class="form-group mb-3">
  <label>State:</label>
  <div class="col-sm-4">
    <select id="state-dd" name="state[]" class="form-control" multiple="multiple"></select>
  </div>
</div>
<div class="form-group mb-3">
  <label>City:</label>
  <div class="col-sm-4">
    <select id="city-dd" name="city[]" class="form-control" multiple="multiple"></select>
  </div>
</div>
<!-- 已引入jQuery和select2依赖可忽略以下两行 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

2. DropdownController代码 #

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

class DropdownController extends Controller
{
    public function fetchState(Request $request)
    {
        // 直接接收前端传的国家ID数组，无需拆分
        $data['states'] = State::whereIn("country_id", $request->country_id)->get(["name", "id"]);
        return response()->json($data);
    }

    public function fetchCity(Request $request)
    {
        // 适配多选州，用whereIn，补充缺失的分号
        $data['cities'] = City::whereIn("state_id", $request->state_id)->get(["name", "id"]);
        return response()->json($data);
    }
}

3. 新增联动JS代码（加在Blade视图底部） #

$(document).ready(function() {
    // 初始化select2多选组件
    $('.js-example-basic-multiple, #state-dd, #city-dd').select2();

    // 监听国家下拉框变更，联动加载州
    $('#country-dd').on('change', function() {
        var countryIds = $(this).val();
        $('#state-dd').html('<option value="">Select State</option>');
        $('#city-dd').html('<option value="">Select City</option>');
        
        if(countryIds.length > 0) {
            $.ajax({
                url: "/fetch-states",
                type: "GET",
                data: { country_id: countryIds },
                dataType: "json",
                success: function(response) {
                    $.each(response.states, function(index, state) {
                        $('#state-dd').append('<option value="'+ state.id +'">'+ state.name +'</option>');
                    });
                    // 刷新select2渲染
                    $('#state-dd').trigger('change');
                }
            });
        }
    });

    // 监听州下拉框变更，联动加载城市
    $('#state-dd').on('change', function() {
        var stateIds = $(this).val();
        $('#city-dd').html('<option value="">Select City</option>');
        
        if(stateIds.length > 0) {
            $.ajax({
                url: "/fetch-cities",
                type: "GET",
                data: { state_id: stateIds },
                dataType: "json",
                success: function(response) {
                    $.each(response.cities, function(index, city) {
                        $('#city-dd').append('<option value="'+ city.id +'">'+ city.name +'</option>');
                    });
                    $('#city-dd').trigger('change');
                }
            });
        }
    });
});

4. 路由配置（添加到routes/web.php） #

use App\Http\Controllers\DropdownController;

Route::get('/fetch-states', [DropdownController::class, 'fetchState']);
Route::get('/fetch-cities', [DropdownController::class, 'fetchCity']);

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