how to successfully reload a tab?

[propertunist]

i am using v3.2.0 here -

i have 3 tabs and a panel for each tab, with each panel containing an html list. the basic tab/panel switching functions correctly.

i also have here a dropdown selector which acts as a filter for the content in the lists. i have written javascript that updates the href values for the tab buttons when the dropdown selector is changed - such that the href values of the tabs, reflect the filter value that is selected in the dropdown selector. e.g. the url used in the href (target destination to be loaded into the panel) now contains url variables that provide information about the filtering of the data that is to be shown in the lists - these values are held by the html SELECT element (dropdown selector).

this all works ok - the data is correctly filtered... except.. that when i change the dropdown selector's value (which causes the current list to be reloaded successfully, due to jquery/js code that i have written to the onchange event for the dropdown selector) and when i then change the active tab/panel by clicking a tab, the newly activated panel/list is being loaded without the filter being applied.

i am unsure why this is occurring and wonder if maybe there is a quirk of easy-tabs that i am not aware of here?

this is the code for the change event of the dropdown (i imagine there is a better way of doing this, than the process of stripping the url that i am using here):

$('#river-selector').change(function() { 
        var container = $('#easy-tabs');
    var selected_tab = $(container).find('a.state-selected'); // get the currently selected link in the list of tabs

       $(container).find('li.tab a').each(function(index){ // for each tab's hyperlink
    var url = $(this).attr('href');
    var hash = $(this).attr('data-target');
    if (url.indexOf('?') != -1) // if the tab's url contains a question mark symbol
    url = url.substring(0, (url.indexOf('?')));  // strip all characters after the ? symbol     
    if (url.indexOf('#') != -1) // if the url contains a # symbol
    url = url.substring(0, (url.indexOf('#')-1)); // strip all characters after the hash

    url += '?' + $('#river-selector').val(); // add the question mark and currently selected subtype value
    url += ' ' + hash; // add the hash value back to the url

    $(this).attr('href', url); // insert the url back to the tab, now that it contains the correct subtype
    });

    var selected_panel = $('body').find('#easy-tabs .panel-container > div.state-selected');
    $(selected_panel).load(selected_tab.attr('href'),function(response, status, xhr){ // refresh the current tab
    $(selected_tab).parent().data('easytabs').cached = false;

       $(container).trigger('easytabs:ajax:complete', [selected_tab, selected_panel, response, status, xhr]);
        });
    });

i looked at various approaches to get the list to always refresh effectively.. so far i have not found the one that functions correctly in all circumstances..

anyone aware of what i have missed? thanks