选择类别时不显示子类别

Question

这是控制器文件代码

 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'));
}

这是 javascript 文件

          <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="{{ $key }}">{{ $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>

当我单击页面上的类别但不显示子类别时，我试图获取子类别。子类别显示在 API 中，但未显示在页面中...

Answer 1

你可以使用

//...
success: function(data){

     //Log the data to the console so that
     //you can get a better view of what the script is returning.
     console.log(data);
     $('#subcategory').empty();
     $.each(data, function(key, value){
           //Use the Option() constructor to create a new HTMLOptionElement.
           var option = new Option(key, value);
           //Convert the HTMLOptionElement into a JQuery object that can be used with the append method.
           $(option).html(value);
           //Append the option to our Select element.
           $('#subcategory').append(option);
     });

}