title: jQuery AJAX Update a dropdown select onChange return an empty string
body: <p>Can someone tell me what I'am doing wrong here, <code>console.log()</code> returns me an empty string instead of an array ?</p>
  
  <p>I want to update the second selectbox once onChange is triggered on first selectbox but I can't retrieve the data. When I'am doing a <code>var_dump($results)</code> it successfully shows an array of items, but <code>return $results</code> returns me an empty string.</p>
  
  <p>Here how it looks like:<br/>
  <img src="https://i.stack.imgur.com/3Wlmg.png" alt="enter image description here"></p>
  
  <p>a javascript:</p>
  
  <pre><code>function _getNestedSelectOptions(activeComponent){
      $.ajax({
          type:   "POST",
          url:    "/backend/categories/get_nested_options/" + activeComponent
      }).done(function(html){
          console.log(html);
      });
  }
  </code></pre>
  
  <p>And this is a php code <code>controllers/backend/categories.php</code>:</p>
  
  <pre><code>public function get_nested_options($cid = FALSE){
      if($cid == FALSE)
          $cid = $this-&gt;activeComponent;
  
      $categoriesResult = $this-&gt;categories_model-&gt;get_categories_tree_by_com($cid);
  
      $categoriesDropdownOptions = array();
  
      $this-&gt;categories_model-&gt;get_nested_options($categoriesDropdownOptions, $categoriesResult);
  
      var_dump($categoriesDropdownOptions); // &lt;-- THIS WORKS AND SHOWS AN ARRAY OF ITEMS
      //return $categoriesDropdownOptions; // &lt;-- THIS DOES NOT WORKING
  }
  </code></pre>
  
  <p>here is an output on <code>console.log()</code>:</p>
  
  
  <b>array</b> <i>(size=3)</i><br/>
    7 =&gt; string 'Administrators' -><i>(length=14)</i><br/>
    8 =&gt; string 'Managers' -><i>(length=8)</i><br/>
    9 =&gt; string 'Users' -><i>(length=5)</i><br/>