CODE EXAMPLE FOR JAVASCRIPT

jquery ajax

//jquery ajax
// controller
public function product($id)
    {
        $category = SubCategory::where('category_id', $id)
            ->select('id', 'category_id', 'name')
            ->get();

        if (count($category) > 0) {
            return $category;
        }else{
            return 'no sub category';
        }
    }

// url 
Route::get('/product/{id}', 'product')->name('ajax.product');

// product page
        <script>
            let categroy = $('select[name="slect_category"]')
            let subCategroy = $('select[name="slect_sub_category"]')
            categroy.on('change',function(){
                let id = $(this).val()
                let url = `{{ route('ajax.product', ':id') }}`
                let newurl = url.replace(':id', id);
                $.ajax({
                    url: newurl,
                    dataType: 'json',
                    type: "get",
                    success: function(response){
                        let options =[]
                        response.map(element =>{
                            console.log(element)
                            let option = `<option value="${element.id}">${element.name}</option>`;
                            options.push(option)
                        })
                        subCategroy.html('')
                        subCategroy.html(options)
                    },
                })
            })
        </script>