Filter a second dropdown list when a value is chosen in the first one

I have a table with two dropdown lists. The first one is the brand which is a WordPress custom post type. The second is the flavors which is also a custom post type. Brand is the parent of the flavors. When I choose a brand I need to update the second dropdown list with the flavors of this brand (the children).

I created shortcodes for my lists and they are correctly filled. But I don't know how to filter the second dropdown list when the first one changes.

Here is my table :

<table id="fla_inf" width="100%">
<tr>
<th class="tab_header" colspan="6">Flavors and Additives</th>
</tr>
<tr>
    <th class="tab_header_nam">Flavor Brand</th>
    <th class="tab_header_nam">Flavor Name</th>
    <th class="tab_header_nam">Dropper type</th>
    <th class="tab_header_nam">Quantity Unit</th>
    <th class="tab_header_nam">Quantity</th>
    <th class="tab_header_nam">Add/Remove row</th>
</tr>
<tr class="flavors">
    <td><?php wp_dropdown_pages(array('id'=>'marque0','post_type' => 'marque-type')); ?></td>
    <td><select id="arome0" class="arome"></select></td>
    <td><select id="dropper0" class="dropper">
            <option selected="selected" value="type1">type 1</option>
            <option value="type2">type 2-3</option></select></td>
    <td>
        <select id="qtyunit0" class="qtyunit">
            <option value="ml">ml</option>
            <option value="drops">drops</option>
            <option selected="selected" value="perc">%</option>
        </select>
    </td>
    <td><input id="quantity0" class="quantity" type="number"/></td>
    <td><input class="addline" type="image" src="http://ift.tt/1D3J93l"/><input class="remline" type="image" src="http://ift.tt/1ztvT5r"/></td>
</tr>
</table>

here are my shortcodes :

function GetBrandList() {

    $brands = wp_dropdown_pages(array('id'=>'marque0','post_type' => 'marque-type','echo'=>0));
    return $brands;
} 

function GetFlavorList() {

   $flavors = wp_dropdown_pages(array('id'=>'arome0','post_type'=>'aromes-type','echo'=>0));
   return $flavors;
}   

add_shortcode('brand_list', 'GetBrandList');
add_shortcode('flavor_list', 'GetFlavorList');

Here is my update :

I added the following to my functions.php

 add_action( 'wp_ajax_brand_children', 'GetBrandChildren');
add_action( 'wp_ajax_nopriv_brand_children', 'GetBrandChildren');

function GetBrandChildren($parent_id,$id) {
   $children = wp_dropdown_pages(array('id'=>'arome$id','post_type'=>'aromes-type','child_of'=>$parent_id,'echo'=>0));
   return $children;
}

and here is my jquery :

    //On selected brand, update flavors list
$(document).on('change', "select[id^='marque']", function() {

        var $brandid =  $(this).val();
        var $brand_dd_id = $(this).attr('id');
        var $flav_dd_id = $brand_dd_id.substr($brand_dd_id.length-1);
        $("#arome"+$flav_dd_id).empty();

        //Make AJAX request, using the selected value as the GET
        $.ajax({data: '{"parent_id":"' + $brandid + '","id":"'+ $flav_dd_id +'","action":"brand_children"}',
                success: function(output) {
                    alert(output);
                    $("#arome"+$flav_dd_id).html(output);
                }
         });

});

However, my dropdown list of flavor remains empty. In the output showed in the alert, the complete html page seems to be returned.