// jquery ajax
<script>
let categoryName = $('select[name="category"]')
let subcategory = $('select[name="subcategory"]')
categoryName.on('change',function(){
let myUrl = `{{ route('products.ajax', ':id') }}`
let id = $(this).val()
let newUrl = myUrl.replace(':id', id);
$.ajax({
url: newUrl,
dataType: 'json',
type: 'get',
success: function (response){
let options =[]
response.map(element => {
let option = `<option value="${element.id}">${element.name}</option>`;
options.push(option)
})
subcategory.html('')
subcategory.html(options)
},
error: function(data){
let option = `<option disable>${data.responseText}</option>`
subcategory.html('')
subcategory.html(option)
}
})
})
</script>