title: Filtering dropdown form with jquery.ajax
body: <p>I have two dropdown getting value from database:</p>
  
  <p><strong>Table_Buildings</strong></p>
  
  <blockquote>
    <p>|id|---|building_name|</p>
  </blockquote>
  
  <p><strong>Table_Floors</strong></p>
  
  <blockquote>
    <p>|id|---|Floor_name|---|building(Foreign key to table_Buildings)|</p>
  </blockquote>
  
  <p>and in my form</p>
  
  <p>Dropdown: building)</p>
  
  <pre><code>$db-&gt;setQuery("SELECT buildings.building_name, floors.id 
                 FROM buildings 
                 INNER JOIN floors 
                 ON buildings.id=floors.id"
  </code></pre>
  
  <p>Dropdown: floor)</p>
  
  <pre><code>$db-&gt;setQuery("SELECT floor_name, id FROM floors");
  </code></pre>
  
  <p>For filtering my dropdown I want to use this script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var xhr;
  jQuery(function($) {
      $('#filter_building').change(function(){
          var filterBuilding = $('#filter_building').val(); 
          if (xhr &amp;&amp; xhr.abort) {
              xhr.abort();xhr=false;
              }
          xhr = jQuery.ajax( {
              url: 'index.php', 
              data: 'option=com_mycomponent', 
              success: function(data){
                  jQuery('#filter_building').replaceWith(data);
              }
          });
      });
  });
  &lt;/script&gt; 
  </code></pre>
  
  <p>But somewhere is wrong and its not working.</p>