How to use the selected value of first select to set the value of second select

Is there a way to do it? Im using onchage on fisrt select to call a function on javascript to do it but it does not change the selected value on the second select.

code:
function BuscaFormaPagto(str) {
if (str == “”) {
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“txtHint”).innerHTML = this.responseText;
const $select = document.querySelector((“forma_recebimento”);
$select.value = this.responseText;
}
};
xmlhttp.open(“GET”,“getformarecebimento.php?q=”+str,true);
xmlhttp.send();
}
}

tried to use it as in example:

$(’#mySelect2’).val(‘1’); // Select the option with a value of ‘1’
$(’#mySelect2’).trigger(‘change’); // Notify any JS components that the value changed

But it still does not run!

function BuscaFormaPagto(str) {

    if (str == "") {
      return;
    } else {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            $('.CHR(39).'#forma_recebimento'.CHR(39).').val(this.responseText);
            $('.CHR(39).'#forma_recebimento'.CHR(39).').trigger('.CHR(39).'change'.CHR(39).'); // Notify any JS components that the value changed
    }
    };
     xmlhttp.open("GET","getformarecebimento.php?q="+str,true);
     xmlhttp.send();
    }
  }

I just changed from:
select class=“selectbox” name=“forma_recebimento” id=“forma_recebimento” required
to:
select name=“forma_recebimento” id=“forma_recebimento” required
… and problem solved! Why? have no idea!