Laravel动态下拉菜单未正常清空：实现服务-分类级联下拉功能

我来帮你搞定这个动态级联下拉菜单的需求！结合你提到的服务和分类一对多关联，咱们分后端和前端两部分一步步实现：

首先咱们完善你给出的create方法，同时新增一个API接口用来根据服务ID获取对应的分类：

1. 完善create方法，传递服务列表到视图 #

public function create() {
    // 获取所有服务，按名称自然排序（忽略大小写）
    $services = Service::all()->sortBy('service_name', SORT_NATURAL | SORT_FLAG_CASE);
    
    // 如果你的业务里需要客户端数据，保留原有逻辑即可，这里先聚焦服务分类
    // $client = Client::all()->sortBy('client_name', SORT_NATURAL | SORT_FLAG_CASE);
    
    return view('requests.create', compact('services'));
}

2. 新增获取分类的API接口 #

这个接口会接收服务ID，返回对应分类的JSON数据：

use Illuminate\Http\Request;

public function getCategoriesByService(Request $request) {
    // 验证传入的服务ID是否合法
    $request->validate([
        'service_id' => 'required|exists:services,id'
    ]);
    
    // 获取对应服务下的所有分类，同样按名称排序
    $categories = Category::where('service_id', $request->service_id)
                          ->sortBy('category_name', SORT_NATURAL | SORT_FLAG_CASE)
                          ->get();
    
    // 返回JSON格式的分类列表
    return response()->json($categories);
}

3. 配置路由 #

在routes/web.php里添加对应的路由：

Route::get('/requests/create', [RequestController::class, 'create']);
Route::get('/categories/get-by-service', [RequestController::class, 'getCategoriesByService'])->name('categories.by.service');

接下来在requests/create.blade.php里渲染下拉菜单，并通过AJAX实现动态联动：

1. HTML下拉菜单结构 #

<div class="form-group">
    <label for="service_id">选择服务</label>
    <select id="service_id" name="service_id" class="form-control">
        <option value="">请选择服务</option>
        @foreach($services as $service)
            <option value="{{ $service->id }}">{{ $service->service_name }}</option>
        @endforeach
    </select>
</div>

<div class="form-group">
    <label for="category_id">选择分类</label>
    <select id="category_id" name="category_id" class="form-control" disabled>
        <option value="">请先选择服务</option>
    </select>
</div>

2. AJAX联动逻辑（用jQuery示例） #

如果项目里没引入jQuery，也可以用原生Fetch API实现：

$(document).ready(function() {
    // 监听服务下拉菜单的选择变化
    $('#service_id').on('change', function() {
        const serviceId = $(this).val();
        const categorySelect = $('#category_id');

        // 未选择服务时，重置分类下拉并禁用
        if (!serviceId) {
            categorySelect.empty().append('<option value="">请先选择服务</option>').prop('disabled', true);
            return;
        }

        // 发送AJAX请求获取分类数据
        $.ajax({
            url: '{{ route('categories.by.service') }}',
            type: 'GET',
            data: { service_id: serviceId },
            success: function(response) {
                // 清空分类下拉并启用
                categorySelect.empty().prop('disabled', false);
                categorySelect.append('<option value="">请选择分类</option>');

                // 遍历返回的分类，添加为下拉选项
                $.each(response, function(index, category) {
                    categorySelect.append(`<option value="${category.id}">${category.category_name}</option>`);
                });
            },
            error: function() {
                categorySelect.empty().append('<option value="">加载分类失败</option>').prop('disabled', true);
            }
        });
    });
});

• 确保你的Service和Category模型已经正确定义关联：

  // Service模型
  public function categories() {
      return $this->hasMany(Category::class);
  }
  
  // Category模型
  public function service() {
      return $this->belongsTo(Service::class);
  }
  

• 根据你数据库的实际字段名调整代码中的service_name、category_name等字段
• 如果要优化性能，可以考虑给services和categories表的排序字段添加索引

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