LinuxQuestions.org - Can't call function with results chosen from select list

<





<!DOCTYPE html>

<html>

<head>
<title>Account Categories</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />











<script type="text/javascript" src="../../jquery/jquery-3.2.0.js"></script>

</head>





<body>

<div id="category">

</div>

<<div id="city">

</div>







<script type="text/javascript" >

let mySelection=""; // global var

myAjaxCallCat();

function myAjaxCallCat() {

var request = $.ajax({
url: "getCategory.php",
type: "POST",
//data:
dataType: "json"
});

request.always(function (data) {

$('#category').append($("<br><label for='cats'>Choose a Category</label><br>"))
.append($("<select id='cats' name='cats' size='5' ></select>"))
.append("<br>");

for (const val of data) {
$('#cats').append($("<option>").prop({ value: val, text: val }));
//$('#category').append($("<option>").prop({ value: val, text: val }));
}
//$('#cats').append("<br><br>");

$("#cats").on('change', function () {
mySelection=$("#cats option:selected").text(); // global mySelection

alert("You Chose: "+mySelection); THIS IS WORKING AND DOES SHOW CHOSEN CATEGORY

EVERYTHING BELOW WILL NOT WORK - IT'S IN THE SAME FUNCTION BLOCK SO I'M AT A LOSS AS HOW TO FIX IT - PLEASE HELP

/* myAjaxCallCo(window.mySelection);

function myAjaxCallCo(cat) {
alert("line 97: "+cat);

var request = $.ajax({
url: "getCompany.php",
type: "GET",
data: {"category":cat},
dataType: "json"
});

request.always(function (data) {

alert(data:)

})
}

*/

}) // cats
})// request
}// myAjaxCall

</script>

</body>
</html>[/CODE]