How to populate state dropdown based on option selected in country dropdown using jQuery?

How to populate state dropdown based on option selected in country dropdown using jQuery?

jQuery

$(document).ready(function(){
    $("select.country").change(function(){
        var selectedCountry = $(".country option:selected").val();
        $.ajax({
            type: "POST",
            url: "/examples/php/process-request.php",
            data: { country : selectedCountry } 
        }).done(function(data){
            $("#response").html(data);
        });
    });
});

html

    

        

            

                Country:
                
                    Select
                    United States
                    India
                    United Kingdom
                
            
            

                
            
        
    

PHP

if(isset($_POST["country"])){
    // Capture selected country
    $country = $_POST["country"];
     
    // Define country and city array
    $countryArr = array(
                    "usa" => array("New Yourk", "Los Angeles", "California"),
                    "india" => array("Mumbai", "New Delhi", "Bangalore"),
                    "uk" => array("London", "Manchester", "Liverpool")
                );
     
    // Display city dropdown based on country name
    if($country !== 'Select'){
        echo "City:";
        echo "";
        foreach($countryArr[$country] as $value){
            echo "". $value . "";
        }
        echo "";
    } 
}