can't get returns from ajax success callback function

Object: Create dropdown list for general use by only sending one parameter.

I am trying to call 1. Ajax with a parameter then 2. process that Ajax data to select an option from a database and 3. return that option selected to the calling function - in order to populate an input tag. I am running into trouble in returning my selection to the calling function. I know this is tied into the asynchronous nature of Ajax but I don't know how to fix this.

Here is the code I'm using:

Code: <!-- ====== HTML =========== -->

<label for='dr'>Doctor</label>
<input class="hov" id="dr" type="text" name="dr" /><br> <!-- Populate This -->

<div id="category"> <!-- Show Select Box Here -->

</div>
<!-- ======== SCRIPT ============ -->

<script type="text/javascript" >

var myselection=""; // Global var's
var str="";
var ret="";

$(document).ready(function(){

$("input[name=dr").focus(function(){ // FOCUS is on INPUT
str="doctors"; // str - any array name in PHP file to get the database info
ret=callAjaxDr(str); // return value from select box to populate input
$("input[name=dr]").val(ret);
});

</script>
// ========= JS FILE =============

in .js file

function callAjaxDr(str) { // gets data from mysql database using PHP script
$.ajax({
url: "listArrays.php",
type: "POST",
data: {"lstnm":str},
dataType: "json",
success: getDr
}); // ajax
}

function getDr(data) {
$('#category').show();
$('#category').append($("<h4>Selection Offered</h4>")) // create select table
.append($("<select id='cats' name='cats' size='5'></select>"));
for (const val of data) {
$('#cats').append($("<option>").prop({ value: val, text: val }));
}
$('#category').append("<br><br>");

$("#cats").on('change', function () { // make selection
myselection=$("#cats option:selected").text();
$('#category').empty();
}); // change

return myselection; // TROUBLE AREA - return selected option to calling function
}