Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I'm trying to get data from API to be displayed in Dropdown List, even though the parent Dropdown is displaying the data, the rest of the Dropdown List doesn't show anything when i select a data from parent Dropdown.
Here is my Script:
<script type="text/javascript">
$('#province').change(function(){
var provinceID = $(this).val();
if(provinceID){
$.ajax({
type:"GET",
url:"http://dev.example.com/api/districts_list?province="+provinceID,
success:function(res){
if(res){
$("#districts").empty();
$("#districts").append('<option>Select</option>');
$.each(res,function(key,value){
$("#districts").append('<option value="'+key+'">'+value+'</option>');
});
}else{
$("#districts").empty();
}
}
});
}else{
$("#districts").empty();
$("#subdistrict").empty();
}
});
$('#districts').on('change',function(){
var districtsID = $(this).val();
if(districtsID ){
$.ajax({
type:"GET",
url:"http://dev.example.com/api/subdistrict_list?kab="+districtsID ,
success:function(res){
if(res){
$("#subdistrict").empty();
$.each(res,function(key,value){
$("#subdistrict").append('<option value="'+key+'">'+value+'</option>');
});
}else{
$("#subdistrict").empty();
}
}
});
}else{
$("#subdistrict").empty();
}
});
</script>
And here is my view:
<div class="form-row">
<div class="form-group col-md-4">
<label for="province">Province</label>
<select id="province" name="province" class="form-control">
<option selected>Choose...</option>
@foreach ($provinces as $key)
<option value="{{ $key->province_id }}">{{ $key->province }}</option>
@endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="districts">Districts</label>
<select id="districts" name="districts" class="form-control">
</select>
</div>
<div class="form-group col-md-4">
<label for="subdistrict">Sub-district</label>
<select id="subdistrict" name="subdistrict" class="form-control">
</select>
</div>
</div>
I don't understand where i was wrong, do you have any idea?
Maybe we should find out this is the Laravel issue or ajax issue first. You can add some debug logs inside the ajax function.
$('#province').change(function(){
var provinceID = $(this).val();
console.log('province id',provinceID);
if(res){
console.table(res)
}
etc....
Thank you for your fast response!
I got this error when debugging from Chrome:
Access to XMLHttpRequest at 'http://dev.example.com/api/districts_list?province=5' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
And this one:
GET http://dev.example.com/api/districts_list?province=5 net::ERR_FAILED
The issue is caused by the Cors middleware, maybe you can refer to this https://laracasts.com/discuss/channels/laravel/cors-1
Btw, if you are working on localhost, the fastest solution is serving the hosts in 2 different ports. Example :
Browse the website using the domain http://your domain:8000, the ajax request the API with the port 8001
Thank you for your help, i've installed the package and then re-deploy the project again from localhost but it still throwing the same error. And regarding changing the port, it's too, still throwing the same error...
It's still the same, i don't understand though, API is working perfectly and the selected value is showing but right after that is that error..
I am not that familiar in using ajax, but normally I usually faced this issue when I am using axios, the way I handle is using the plugin https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en
Great! This is work! But somehow the another Dropdown List only showing 'true' and '[object Object]'
Do you mean this drop-down list?
success:function(res){
if(res){
$("#districts").empty();
$("#districts").append('<option>Select</option>');
$.each(res,function(key,value){
$("#districts").append('<option value="'+key+'">'+value+'</option>');
});
}else{
$("#districts").empty();
}
}
if yes, then you will have to get the correct response data from the API, try to console.table(res.data) to check the data.
success:function(res){
if(res){
console.table(res);
console.table(res.data);
}
}else{
}
Yes, and here is the response:
Based on the result of console.table(res.data);, I assumed the variable resultsis the data you want
var data = res.data.results;
if(data.length>0){
$("#subdistrict").empty();
$.each(data,function(key,value){
$("#subdistrict").append('<option value="'+key+'">'+value+'</option>');
});
}else{
$("#subdistrict").empty();
}
Thank you so much, it's working like a charm! Except i should change this line:
$("#subdistrict").append('<option value="'+key+'">'+value+'</option>');
to this:
$("#subdistrict").append('<option value="'+value.district_id+'">'+value.district_name+'</option>');
--because the data still in form of '[object Object]', but nonetheless you really help me a lot! Thank you for bearing with me! :D
You are welcome. This is why we have a forum here =).
Can i see your controller? i have same problem but still error
What is your issue? Perhaps open a new thread with a briefly description is better?
Please or to participate in this conversation.