Problem assigning value to variable due to variable scope issue

Question

Basically i am trying to fetch some values from server and using those values i am making a select element. I have initialized and assigned pages_str variable in the starting of function getPages() . I am concatenating other options of select element when i get response from server.But unfortunately those strings do not seem to be concatenated when i check values in console.

   function getPages()
   {
        var pages_str = '<option disabled selected value >Select Value</option>';
        $.ajax(
             {
               url:"value_choices",
               type:"GET",
               data:{"key": "Pages Visited"}, 
               dataType:"json",
               success:function(response)
                {
                  if(response.data)
                  {
                    pages_array = response.data;
                    console.log(pages_array);
                    var i=0;
                    for(i=0;i<pages_array.length;i++)
                    {
                     pages_str = pages_str +'<option value="'+pages_array[i]+'">'+pages_array[i]+'</option>';
                    }
                  }
                }
          });
     console.log(pages_str);
     return pages_str;
   };

Value of console.log(pages_array) is this

["Hostza", "Hostza-Package", "Hostza-Single Blog", "Hostza-Elements", "Hostza-Support", "Hostza-About", "Hostza-Contact"]

Value of console.log(pages_str) is this

<option disabled selected value >Select Value</option>

What am i doing wrong?