JQuery: passing data returned from ajax function to a variable

I'm not sure if I worded the question correctly. I am dynamically building a display of database records in a grid (row, cols). Some of the cells use form objects and I am using AJAX to help build them (the options in the select are stored in a db table). So my code looks like this (the return from the AJAX call is the complete ...set up:

   ...

//write cell html if (d == 1) { userdata += "" + thisitemarray[1] + "

                    //make ajax call to get departments
                    $.ajax({
                       type: "POST",
                       url: "lib/getDropDowns.php",
                       data: "thistable=departments&selecteditem=" + thisitemarray[1] + "&classnames=userdept userdatainput",
                       success: function(data){
                         userdata += "<p class=\"datacell department\">" + data + "&开发者_开发知识库lt;/p>";
                       }
                  });

                 } else if (d == 3) {
                    userdata += "<p class=\"datacell bucket\"><input type=\"text\" value=\"" + thisitemarray[1] + "\" class=\"userbucket userdatainput\" dbid=\"" + dbid + "\"></p>";
                 } else if (d == 4) {
                    userdata += "<p class=\"datacell pubcode\"><input type=\"text\" value=\"" + thisitemarray[1] + "\" class=\"userpubcode userdatainput\" dbid=\"" + dbid + "\"></p>";
                 } else if (d == 5) {
                    userdata += "<p class=\"datacell area\"><input type=\"text\" value=\"" + thisitemarray[1] + "\" class=\"userarea userdatainput\" dbid=\"" + dbid + "\"></p>";
                 } else if (d == 6) {
                    userdata += "<p class=\"datacell hours\"><input type=\"text\" value=\"" + thisitemarray[1] + "\" class=\"userhours userdatainput\" dbid=\"" + dbid + "\"></p>";
                 } else if (d == 7) {
                    userdata += "<p class=\"datacell description\"><textarea class=\"userdesc\" dbid=\"" + dbid + "\">" + thisitemarray[1] + "</textarea></p>";
                 }//end d check 2

The problem is that this line of code:

success: function(data){
                         userdata += "<p class=\"datacell department\">" + data + "</p>";
                       }

does not show up on my page. I am assuming because userdata is being seen as a local variable within the function. How can I pull the data being passed from AJAX out into my script so I can use it?

before the loop add an counter:

var counter = 0;

Later use it as ID generator:

if (d === 1) { 
  userdata += "" + thisitemarray[1];
} else if (d === 2) { 
  var id = 'datacell_department_' + counter;
  counter++;
  userdata += "<p class=\"datacell department\" id=\""+id+"\"></p>";
  //make ajax call to get departments
  $.ajax({
    type: "POST",
    url: "lib/getDropDowns.php",
    data: "thistable=departments&selecteditem=" + thisitemarray[1] + "&classnames=userdept userdatainput",
    success: function(data){
      $('#'+id).html(data);
    }
  });
} else if (d === 3) {
  userdata += "...";
}

Use async: false parameter in query settings

@Sergey G - -thanks, that took care of it. Here's an example for others to snippet:

function getWhatever()

{ var strUrl = ""; //whatever URL you need to call var strReturn = "";

jQuery.ajax({ url:strUrl, success:function(html){strReturn = html;}, async:false });

return strReturn; }