Question

This is output of image and which show all category and subcategory

我想要实现的是显示所有类别，并且当单击一个类别时，应该显示其相对子类别。

模型视图代码

    <!-- Button to Open the Modal -->

      <div class="form-group col-md-8">
      <button type="button" class="form-control" data-toggle="modal" data-target="#myModal">
    Category  </button>

      <!-- The Modal -->
      <div class="modal" id="myModal">
    <div class="modal-dialog modal-lg" >
          <div class="modal-content">
          
            <!-- Modal Header -->
            <div class="modal-header">
              <h4 class="modal-title">Category</h4>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            
            <!-- Modal body -->
            <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4" >
                                    <a href="#" name="category" id="category" >            
                                        @foreach($categories as $category)
                                        <option value="{{$category->id}}">{{$category->category}}</option>
                                        @endforeach
                                     </a>
                             
                        </div>
                          <div class="col-md-4 ">
                            <a href="#" name="subcategory" id="subcategory" >
                                @foreach($subcategories as $subcategory)
                                <option value="{{$subcategory->id}}">{{$subcategory->subcategory}}</option>
                                @endforeach
                             </a>
                                
                          </div>
                          <div class="col-md-4">
                            hhh
                          </div>
                  </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <script type="text/javascript">
      $(document).ready(function() {
       
                        $('#category').change(function(){
                var categoryID = $(this).val();
                if(categoryID){
                    $.ajax({
                        type:"GET",
                        url:"{{url('/api/getSubcategory/')}}/"+categoryID,

                        success:function(res){

                            if(res){
                                
                                data = JSON.parse(res)
                                $("#subcategory").empty();
                                $("#subcategory").append('<option>Select</option>');
                                $.each(data,function(key,value){
                                    $("#subcategory").append("<option value='"+key+"'>"+value+"</option>");
                                           
                                });

                            }else{
                                $("#subcategory").empty();
                            }
                        }
                    });
                }else{
                    $("#subcategory").empty();
                }
            });
                    });
</script>

控制器代码：

public function create()
{
    $categories = Category::all();
    $subcategories = Subcategory::all();

    return view('post.create', compact('categories', 'subcategories'));
}

这是路线：

Route::get('/post/create', 'PostController@create')->name('post.create');

这是我创建的API，但我不知道如何使用它。

public function getSubcategory(Request $request)
{
    $id = $request->id;
    $subcategories = Subcategory::where('category_id',$id)
                         ->select('subcategory','id')
                         ->pluck('subcategory', 'id');
    {{ dd(json_decode($subcategories, true)); }}

    return json_encode($subcategories);
}

API路由

Route::get('api/getSubcategory/{id}', 'PostController@getSubcategory');

当模型更改为其相对类别的子类别时，如何在运行时执行此操作。

请帮助我。我是初学者。

我要这种类型的输出 output which i want

Answer 1

作为初学者，您可以轻松地执行以下操作。

<div class="modal-body">
    <div class="row">
       <div class="col-md-4" >

        @foreach($categories as $category)

          <a href="#" name="category" id="category" >                            
              <option value="{{$category->id}}">{{$category->category}}</option>
          </a>

          <div class="col-md-4 ">

            @foreach($category->subcategory as $subcat)
                <a href="#" name="subcategory" class="subcategory" >
                    <option value="{{$subcat->id}}">{{$subcat->subcategory}}</option>                             
                </a>
             @endforeach
         </div>
        @endforeach

      </div>
  </div>

如果您仍想在类别项目的单击/悬停事件上加载子类别，则可以使用jquery库来实现。 answer告诉您如何在鼠标悬停事件上执行某些操作。只需通过ajax，($.ajax())和append调用该事件的get子类别路由即可。

Answer 2

对于动态子类别，请在jquery Ajax函数下使用

<div class="modal-body">
  <div class="row">
        <div class="col-md-4" >
          <a href="#" name="category" id="category" >            
              @foreach($categories as $category)
              <option class="categoryList" value="{{$category->id}}">{{$category->category}}</option> <!-- add conman class for click event --> 
              @endforeach
           </a>
        </div>
        <div class="col-md-4 ">
          <a href="#" name="subcategory" id="subcategory" >
          </a>
        </div>
  </div>
</div>
<script type="text/javascript">
  $('.categoryList').on('click', function(){
  var cat_id = $(this).attr('value');
  var url = "localhost:8000/api/getSubcategory/"+cat_id;
  $.ajax({
      type: "GET",
      url: url,
      dataType: "JSON",
      success: function(res)
      {
        // amusing res = {"3":"home","4":"home duplex"}; 
        var html = "";
        $.each(res, function (key, value) {
             html += "<option value="+key+">"+value+"</option>";
        });
        $("#subcategory").html(html);
      }
  });
});
</script>

如果要将数据存储在数据库中，请删除模型并在最后一次输入表单后添加下面的HTML。

<div class="col-md-4" >
  <select onchange="selectSubcategory(this)" name="category_id">            
      @foreach($categories as $category)
      <option value="{{$category->id}}">{{$category->category}}</option>
      @endforeach
  </select>
</div>
<div class="col-md-4 ">
  <select name="subcategory_id" id="subcategory_id">                                  
  </select>
</div>

动态子类别的以下代码

<script type="text/javascript">
  function selectSubcategory(obj){
  var cat_id = $(obj).val();
  var url = "localhost:8000/api/getSubcategory/"+cat_id;
  $.ajax({
      type: "GET",
      url: url,
      dataType: "JSON",
      success: function(res)
      {
        // amusing res = {"3":"home","4":"home duplex"}; 
        var html = "";
        $.each(res, function (key, value) {
             html += "<option value="+key+">"+value+"</option>";
        });
        $("#subcategory_id").html(html);
      }
  });
}
</script>

在控制器存储方法中，按如下所示获取类别和子类别

$request->category_id;
$request->subcategory_id;

Answer 3

@extends('layouts.app')

@section('content')
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>   
       <div class="modal-body">
  <div class="row">
        <div class="col-md-4" >
          <a href="#" name="category" id="category" >            
              @foreach($categories as $category)
              <option class="categoryList" value="{{$category->id}}">{{$category->category}}</option>
              @endforeach
           </a>
        </div>
        <div class="col-md-4 ">
          <a href="#" name="subcategory" id="subcategory" >
          </a>
        </div>
  </div>
</div>
      </div>
    </div>
  </div>

</div>
<script type="text/javascript">
  $('.categoryList').on('click', function(){
  var cat_id = $(this).attr('value');
  var url = "localhost:8000/api/getSubcategory/"+cat_id;
  $.ajax({
      type: "GET",
      url: url,
      dataType: "JSON",
      success: function(res)
      {
        // amusing res = {"3":"home","4":"home duplex"}; 
        var html = "";
        $.each(res, function (key, value) {
             html += "<option value="+key+">"+value+"</option>";
        });
        $("#subcategory").html(html);
      }
  });
});
</script>
@endsection

This is output but not save in database

如何动态更改子类别？

3 个答案: