Динамический select

[cepera_007]

Здравствуйте.
Нужна помощь знающих людей.
В форме поиска использую динамические select. По-умолчанию первое поле "Ширина профиля" выводит все доступные ширины автомобильных шин. При выборе ширины, в другое поле подгружаются высоты.
А при выборе ещё и высоты, в третье поле подгрузятся диаметры шин.
После указания параметров в форме, нажимаем кнопку "Подобрать". Происходит перезагрузка страницы и выводятся результаты.
Урл страницы с результатами имеет такой вид: ?width_profile=155&heigh_profile=50&round=13
После перезагрузки страницы все select'ы формы поиска обнуляются.
Как после перезагрузки страницы сохранить все данные в форме поиска из предыдущего шага?

Сама форма поиска

<div id="legko">
Ширина профиля:
<select name="width_profile" id="width_profile">
    <option value="">все</option>
    <option value="155">155</option>
    <option value="160">160</option>
    <option value="165">165</option>
</select>

<br />

Высота профиля:
<select name="heigh_profile" id="heigh_profile" disabled>
    <option value="">все</option>
</select>

<br />

Диаметр:
<select name="round" id="round" disabled>
    <option value="">все</option>
</select>

<br />

<input type="submit" value="Подобрать" />
</div>

Javascrip обработки:

    (function () {
    "use strict";

    jQuery(function () {

        $( '#legko #width_profile' ).change(function () {
            $( '#legko #heigh_profile, #legko #round' ).find( 'option:not(:first)' )
                .remove()
                .end()
                .prop( 'disabled',true );
            var width_profile_id = $( this ).val();
            if (width_profile_id == '') { return; }
            $.ajax({
                type: "POST",
                url: "/search_form_dynamic/query.php",
                dataType: "json",
                data: "tipavto=legkovye&query=width_profile&width_profile_id=" + width_profile_id,
                error: function (data) {
                    alert( "При выполнении запроса произошла ошибка" );
                },
                success: function ( data ) {
                    for ( var i = 0; i < data.length; i++ ) {
                        $( '#legko #heigh_profile' ).append( '<option value="' + data[i].heigh_profile_id + '">' + data[i].heigh_profile_name + '</option>' );
                    }
                    $( '#legko #heigh_profile' ).prop( 'disabled', false );    // Включаем поле
                }
            });
        });
     
        $( '#legko #heigh_profile' ).change(function () {
            $( '#legko #round' ).find( 'option:not(:first)' )
                .remove()
                .end()
                .prop( 'disabled',true );
            var heigh_profile_id = $( this ).val();
            var width_profile_id = $( '#legko #width_profile' ).val();
            if (heigh_profile_id === '') { return; }
            $.ajax({
                type: "POST",
                url: "/search_form_dynamic/query.php",
                dataType: "json",
                data: "tipavto=legkovye&query=heigh_profile&width_profile_id=" + width_profile_id + "&heigh_profile_id=" + heigh_profile_id,
                error: function () {
                    alert( "При выполнении запроса произошла ошибка" );
                },
                success: function ( data ) {
                    for ( var i = 0; i < data.length; i++ ) {
                        $( '#legko #round' ).append( '<option value="' + data[i].round_id + '">' + data[i].round_name + '</option>' );
                    }
                    $( '#legko #round' ).prop( 'disabled', false );    // Включаем поле
                }
            });
        });
    }); // Функция ожидания загрузки документа jQuery
})(); // Немедленно вызываемая функция

 

[Absolute]

var getUrlParams = function(url) {
  var params = {};
  (url + '?').split('?')[1].split('&').forEach(function (pair) {
    pair = (pair + '=').split('=').map(decodeURIComponent);
    if (pair[0].length) {
      params[pair[0]] = pair[1];
    }
  });
  return params;
};
$.each(getUrlParams(location.href), function(id, val){
  var el = $('#'+id);
  if(el.length){
    if(el.find('[value="'+val+'"]').length){
     el.val(val);
    } else {
      $('<option />', {
        value : val,
        text : val,
        selected : ''
      }).appendTo(el);
      el.removeAttr('disabled')
    }
  }
});

Это если url получать данные. Можно еще писать в localStorage значения - оно даже лучше, но надо видеть сам сайт.

 

[cepera_007]

Большое спасибо! То, что и нужно. Ваш вариант подходит больше, чем localStorage потому, что в моём случае посетитель сайта может попасть на страницу с результатами по прямой ссылке и тогда у него поля формы будут пустыми.