---------write it in head section in blade template-----------------
<meta name="csrf-token" content="{{csrf_token()}}">
----------do not use slim version of J Query---------------
--------Use this before document ready in script tag--------
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
</script>
------------------then------------------------------------
<script>
$(document).ready(function(){
$('#country').change(function(){
var country_id = $(this).val();
$('#city').html('<option value="">Select City</option>');
$.ajax({
url: '/getState/'+country_id,
type:'post',
success: function(result){
$('#state').html(result);
}
});
});
$('#state').change(function(){
var state_id = $(this).val();
$.ajax({
url: '/getCity/'+state_id,
type:'post',
success: function(result){
$('#city').html(result);
}
});
});
});
</script>
--------------------------web.php code--------------------------
Route::post('/getState/{id}', [PlaceController::class, 'getState']);
Route::post('/getCity/{id}', [PlaceController::class, 'getCity']);
-------------------------Controller Code -----------------------------
public function getState($country_id){
$states = State::where('country_id', $country_id)->get();
$html = '';
foreach($states as $state){
$html .='<option value="'.$state->id.'">'.$state->state_name.'</option>';
}
echo $html;
}
public function getCity($state_id){
$cities = City::where('state_id', $state_id)->get();
$html = '';
foreach($cities as $city){
$html .='<option value="'.$city->id.'">'.$city->city_name.'</option>';
}
echo $html;
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter