Laravel 5.8动态相关选择下拉菜单

时间:2020-04-10 21:49:26

标签: jquery ajax laravel laravel-5.8

我想使用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'] );

PostController:


 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>


1 个答案:

答案 0 :(得分:0)

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

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

因为您还将id键也传递到了pluck方法中,所以name键的所有值都将用相应的{{1 }}。

所以您的视图应该看起来像这样(未经测试):

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,而是一个主要是独立的实体,所以您可以考虑以下几点:

subcategory

如上例所示,我添加了一个路由参数(https://laravel.com/docs/5.8/routing#route-parameters),该参数使您能够直接从路由中调用模型。 也可以说,该请求与Route::get('/category/subcategories/{category}', 'CategoryContoller@getSubcategories'); 实体有关,因此它将在subcategory中处理。但是,尽管这始终是个人喜好,但对我来说,以这种方式使用它也是更合理的,因为稍后我们将从类别本身接收子类别。因此,我们将在自己感觉更好的控制器中调用和处理SubcategoryController模型。

要使用此方法,您必须更改/添加2件事:

boot
  • 为您的模型添加关系
RouteServiceProvider
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);
}