PHP中的Ajax请求

I need to create dinamic dropdown option. Second select depends of first input. I want to make ajax request from cakephp app to action in controller but i am stucked with ajax code.

I try:

<?= $this->Form->select('country_id' ,$optionsCountry, ['id' => 'country_id'], 'onclick' => 'getcit'); ?>

<?= $this->Form->select('Cities', $optionsCities); ?>

Than i want to create function wich will be called on change of select option but i am stucked.

<script>
function getcities(str){
    var xhttp;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function (){
        xhttp.open('POST', 'controller' => 'cities', 'action' => 'getcit',+str , true);
        xhttp.send();
    }
}

I'm not sure how to call function in html, onchange? onselect? And how to fetch data from first input, send it to controllers action, fetch data from controller and set it in another select?

Thank you, Best regards,

I found jquery.ajax as maybe simplier solution but i stucked again:

<script>
$(document).ready(function){
    $('#country_id').change(function () {
        $.ajax({
            url: "",
            data: "",
            type: 'POST'
        });
    });
}
;

Can you help me with: -how to fetch data from first select -forward it to controller -and set returned value to secon select

Thank you,

You must create ajax call after first <select> change, which returns data for second <select>.

    function getcities(id) {
    $.ajax({
        method: 'POST',
        url: 'some.php',
        data: {
            country_id: id
        },
        success: function (data, status) {
            $('.second_select').html(data); // If returns as html
        }
    });
    return;
}