问利用laravel和inertiajs进行3级依赖选择

EN

$("#country").on('change', function(){
var selectedCountry = $("#country option:selected").val();
    $.ajax({
        url: "<route_for_above_function>",
        success: function(response){
            var html = '';
            $("#country").html(''); //For clearing old option list
            for(var i = 0; i < response.length; i++) {
                    var obj = response[i];
                    html += '<option value="'+obj.id+'">'+obj.name+'</option>';
            }
            $("#country").html(html);
        }
    });
});

<div class="form-group pmd-textfield pmd-textfield-floating-label ">
<label>Country</label>
<select name= "" class="form-control">
    <option value="">Select Country</option>  
    @foreach ($country as $country)
        
        <option>{{$country}}</option>  
    
    @endforeach   
</select><span class="pmd-textfield-focused"></span>
</div>

<div class="form-group pmd-textfield pmd-textfield-floating-label ">
<label for="type_id">State</label>
<select name= "state" id="stateId" class="states order-alpha form-control">
    <option value="">Select State</option>       
    
</select><span class="pmd-textfield-focused"></span>
</div>