How can i store data?

This is view file in this include...css,html and ajax

@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> 
<form enctype="multipart/form-data" method="post" action="" >
                @csrf
<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>

        <div class="modal-body">
  <div class="row">
        <div class="col-md-4" >
          
              @foreach($categories as $category)
              <option  class="categoryList" value=""></option>
              @endforeach
           
        </div>
        <div class="col-md-4 ">
          <a href="#" name="subcategory" id="subcategory" >
          </a>
        </div>
  </div>
</div>
      </div>
    </div>
  </div>

</div>
 <div class="form-group col-md-8">
                    <button type="submit" class="btn btn-primary" value="submit">Submit</button>
                </div>
</form>

<script type="text/javascript">

    $(function(){
        $('.categoryList').on('click', function(){
          //alert('hi');
          var cat_id = $(this).attr('value');
          console.log(cat_id);
          var url = "/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 my controller

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

        return view('post.create', compact('categories', 'subcategories'));
    }
     public function getSubcategory(Request $request){
        $id = $request->id;
         $subcategories = Subcategory::where('category_id',$id)->select
('subcategory','id')->pluck('subcategory', 'id');
return json_encode($subcategories);
    }

This is web.php

Route::get('/post/create', 'PostController@create')->name('post.create');
    Route::get('api/getSubcategory/{id}', 'PostController@getSubcategory' );

problem is i am select still not show in box which subcategory i selected and not store in database I want to do how can i show in box which category and subcategory i selected and how to store in database My english is not good so sorry but i am stuck in problem..How can i do perfectly?

via Chebli Mohamed