Filtering dropdown form with jquery.ajax

Question

i have two dropdown getting value from database:

Table_Buildings

|id|---|building_name|

Table_Floors

|id|---|Floor_name|---|building(Foreign key to table_Buildings)|

and in my form

Dropdown: building)

$db->setQuery("SELECT buildings.building_name, floors.id FROM buildings INNER JOIN floors ON buildings.id=floors.id"

Dropdown: floor)

$db->setQuery("SELECT floor_name, id FROM floors");

For filtering my dropdown i want to use this script:

<script type="text/javascript">
var xhr;
jQuery(function($) {
$('#filter_building').change(function(){
    var filterBuilding = $('#filter_building').val(); 
    if (xhr && xhr.abort) {xhr.abort();xhr=false;}
    xhr = jQuery.ajax( {
            url: 'index.php', 
            data: 'option=com_mycomponent', 
            success: function(data){
                jQuery('#filter_building').replaceWith(data);
            } }
    );
});
});
</script> 

but somewhere is wrong and its not working

Answer 1

To solve a similar request, I have implemented Chained Selects Plugin.

<select id="mark" name="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="series" name="series">
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>

In this way, you can simplify render the proper structure and leave the JavaScript details to the plugin (that's amazing)

More info: Using Remote Version