when select category not show subcategory

This is controller file code

 public function call_pageAjax($id)
{
  $subcat = DB::table("sub_categories")->where("cat_id",$id)->pluck("sub_cat_nm","id");
  return json_encode($subcat);
//  return view('purchase.supplier.add_supplier',compact('subcat'));
}

This is javascript file

          <script type="text/javascript">
           $(document).ready(function() {
                $('select[name="category"]').on('change', function() {
                    var catID = $(this).val();
                    if(catId) {
                        $.ajax({
                            url: '/purchase/supplier/add_supplier/ajax/'+ catID,
                            type: "GET",
                            dataType: "json",
                            success:function(data) {

                                
                                $('select[name="subcategory"]').empty();
                                $.each(data, function(key, value) {
                                    $('select[name="subcategory"]').append('<option value="'+ key +'">'+ value +'</option>');
                                    console.log(data);
                                });


                            }
                        });
                    }else{
                        $('select[name="subcategory"]').empty();
                    }
                });
            }); 
          
        </script>

This is view file.

 <div class="form-group row">
                        <label class="col-sm-2 col-form-label" style="text-align-last: right;">Category Name:</label>
                        <div class="col-sm-6">
                            <select class="form-control" id="category" name="category">
                                <option value=" ">----select Category----</option>
                                @foreach ($category as $key => $value)
                                    <option value=""></option>
                                @endforeach
                            </select>

                        </div>
                    </div>              
                    
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label" style="text-align-last: right;">Sub Category Name:</label>
                        <div class="col-sm-6">
                           <select class="form-control" id="subcategory" name="subcategory">
                            
                           </select> 
                        </div>
                    </div>

i am trying to get subcategory when i click category on a single page so Subcategory is display in api but isn't show in the page...

enter image description here

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/367MMra
via IFTTT