<
<!-- ==================================================================== -->
<!-- ========================== HTML =============================== -->
<!-- ==================================================================== -->
<!DOCTYPE html>
<html>
<head>
<title>Account Categories</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- ==================================================================== -->
<!-- ========================== STYLES =============================== -->
<!-- ==================================================================== -->
<!--<link rel="stylesheet " type="text/css" href="css/main.css" />
<link rel="stylesheet " type="text/css" href="css/buttons.css" />
<link rel="stylesheet " type="text/css" href="css/frontend.css" />-->
<!-- ==================================================================== -->
<!-- ========================== SCRIPTS =================================== -->
<!-- ==================================================================== -->
<script type="text/javascript" src="../../jquery/jquery-3.2.0.js"></script>
</head>
<!-- ==================================================================== -->
<!-- ========================== BODY =================================== -->
<!-- ==================================================================== -->
<body>
<div id="category">
</div>
<<div id="city">
</div>
<!-- ==================================================================== -->
<!-- ========================== MORE SCRIPTS =================================== -->
<!-- ==================================================================== -->
<!-- ================== CATEGORY - DROPDOWN BOX =================== -->
<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]
