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

Тема в разделе "JavaScript", создана пользователем cepera_007, 18 июн 2018.

  1. cepera_007

    cepera_007

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

    Сама форма поиска
    HTML:
    <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
    })(); // Немедленно вызываемая функция
     
    Последнее редактирование: 18 июн 2018
  2. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    483
    Симпатии:
    323
    HTML:
    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 значения - оно даже лучше, но надо видеть сам сайт.
     
    Последнее редактирование: 18 июн 2018
    cepera_007 нравится это.
  3. cepera_007

    cepera_007

    Регистр.:
    28 янв 2007
    Сообщения:
    180
    Симпатии:
    155
    Большое спасибо! То, что и нужно. Ваш вариант подходит больше, чем localStorage потому, что в моём случае посетитель сайта может попасть на страницу с результатами по прямой ссылке и тогда у него поля формы будут пустыми.
     
    Absolute нравится это.