Dynamic generated dropdown value is not passed to controller after page refresh.

Hello,
I have an issue that drives me crazy. 
I' ve created a dynamic dropdown data filtering using ajax. (e.g.: category > size) So far so good. 
The major issue is that when i refresh the page, the dynamic dropdown value (in this case the "size") even though it exists in url as parameter, it's not passed via my ajax function and all my results are filtered based on the first parameter only (which is the "category") and that means that i have to reselect the dynamic dropdown value and filter it again.

P.S.: I' ve included this function twice, one in the "on.change" event and the other while the page loads, so if you have any better solutions on this please feel free to tell. 

P.S. #2: I did not include the controller file since it works fine in the on change events. The only problem is when the page loads or reload with the parameters in it.

Code:

$('#filterProducts').on('change', function(b) {
b.preventDefault();
page = 1;
reachedLimit = false;
var data = $(this).serialize().replace(/[^&]+=\.?(?:&|$)/g, '');
$('.noMoreData').addClass('hidden');
$('.products-inner').empty();

$.ajax({
 url: 'products',
 method: 'post',
 data: data,
 beforeSend: function(data) {
  $('.loader').removeClass('hidden');
 },
 complete: function(data) {
  $('.loader').addClass('hidden');
 },
 success: function(data) {
  if (data == '') {
   $('.noMoreData').removeClass('hidden');
   reachedLimit = true;
  } else {
   $('.products-inner').append(data);
  }
 }
});
});

---

//Life motto
if (sad() == true) {
     sad().stop();
     develop();
}