Laravel 5.8 动态依赖选择下拉菜单

Question

我想使用 JQuery Ajax 获取当前类别的子类别来创建帖子。 它对我不起作用，但是当我像 http://127.0.0.1:8000/back/posts/create/json-subcategories?category_id=1 这样更改浏览器上的 URL 时，它会将所有子类别都放在一个数组中

here's an image example

路线页面：

Route::get('/posts/create', ['uses'=>'Admin\PostController@create','as'=>'post-create', 'middleware'=> 'permission:Post List|All'] );

Route::get('/posts/create/json-subcategories', ['uses'=>'Admin\PostController@subcategories','as'=>'post-create', 'middleware'=> 'permission:Post List|All'] );

后控制器：

 public function create()
    {
         $page_name = 'Create Post';
        $categories = Category::where('status',1)->pluck('name','id'); 
        return view('admin.post.create',compact('page_name','categories'));
    }



public function subcategories()
    {

       $category_id = Input::get('category_id');
      $subcategories = Subcategory::where('category_id', '=', $category_id)->get();
      return response()->json($subcategories);
    }

create.blade.php

<div class="form-group">
            <label for="">Your Category</label>
            <select class="form-control" name="categories" id="categories">
              <option value="0" disable="true" selected="true">=== Select Category ===</option>
                @foreach ($categories as $key => $value)
                  <option value="{{$value}}">{{ $value }}</option>
                @endforeach
            </select>
          </div>



          <div class="form-group">
            <label for="">Your Subcategory</label>
            <select class="form-control" name="subcategories" id="subcategories">
              <option value="0" disable="true" selected="true">=== Select Subcategory ===</option>
            </select>
          </div>



<script src="{{asset('js/jquery.js')}}"></script>
<script type="text/javascript">

$('#categories').on('change', function(e){
        console.log(e);

  var category_id = e.target.value;
        $.get('/posts/create/json-subcategories?category_id=' + category_id,function(data) {
          console.log(data);
      $('#subcategories').empty();
          $('#subcategories').append('<option value="0" disable="true" selected="true">=== Select Subcategory ===</option>');

$.each(data, function(index, subcategoriesObj){
            $('#subcategories').append('<option value="'+ subcategoriesObj.id +'">'+ subcategoriesObj.name +'</option>');
          })

    });

  });

</script>

Answer 1

为什么您的 URL 示例以 /back 为前缀？因为您的路由文件没有显示这种行为。也许错误是在这种构造中找到但还有另一个原因。

对我来说，您的问题似乎是您没有正确设置密钥。集合上的 pluck() 方法返回给定键的所有值，如下所述：
https://laravel.com/docs/5.8/collections#method-pluck

因为您将id-key 也传递给pluck-方法，所以name-key 的所有值都将使用记录的相应id 的值作为键控。

所以你的视图应该看起来像这样（未经测试）：

...
<select class="form-control" name="categories" id="categories">
    <option value="0" disable="true" selected="true">=== Select Category ===</option> 
         @foreach ($categories as $key => $value)
             // changed the value of the value-attribute to the key of the passed collection
             <option value="{{$key}}">{{ $value }}</option>
         @endforeach
</select>
...

但是：
因为我假设您的subcategory-entity 不仅用于您的category，而且是一个主要独立的实体，也许您可​​以考虑以下几点：

• 您还可以使用 Laravel 资源功能。
  https://laravel.com/docs/5.8/controllers#resource-controllers

• 接收subcategory 的路由，即使对于特定的父键，也不应该存在于您的类别的创建路由中。它是一个独立的表和数据类型，所以你可以给它一个类似的路由：

Route::get('/category/subcategories/{category}', 'CategoryContoller@getSubcategories');

正如您在前面的示例中看到的，我添加了一个路由参数 (https://laravel.com/docs/5.8/routing#route-parameters)，它使您能够直接从路由调用模型。 同样合理的说法是，此请求与subcategory 实体有关，因此它将在SubcategoryController 中处理。但是，虽然这始终是个人喜好的事情，但对我来说，以这种方式使用它也更合理，因为我们稍后会从类别本身接收子类别。所以我们将在它自己的控制器中调用和处理category-model，这对我来说感觉更好。

要使用这种方法，您必须更改/添加 2 件事：

• 在您的RouteServiceProvider 的boot 方法中设置路由模型绑定（https://laravel.com/docs/5.8/routing#explicit-binding）：

public function boot()
{
    parent::boot(); // kept this line if its there, add it if not

    Route::model('category', App\Category::class); // add this new line
}

• 为您的模型添加关系：

# Category
public function subcategories() {
    $this->hasMany(App\Subcategory::class);
}

# Subcatgory
public function category() {
    $this->belongsTo(App\Category::class);
}

之后，您可以在CategoryController 中执行以下操作：

#CategoryController
// the $category model variable is automatically injected and is a retrieved dataset from your database
public function getSubcategories(Category $category) { 

    $subcategories = $category->subcategories();

    return response()->json($subcategories->toArray());
}


Hope this can help a bit.