我正在做动态下拉菜单，但我有问题，以保持页面刷新后。
我用的可能是旧的方法，如果用户在第一次选择中选择了一些选项，我会发送 AJAX 请求到php页面，并在第二次选择中显示当前页面上的选项。
我通过localstorage存储字段的所有值，但问题是 AJAX 动态添加的选择（输入）在页面加载时不可见。
所以我决定在刷新后发送请求直接将我的数据发送到php页面。
我的代码如下：

$(window).on('load', function() {
        // Send cat id to add.php to change select options in html according to cat id
        $.ajax({
            url: 'add.php',
            headers: {"X-Test-Header": "test-value"}
        });
    })

我附上图像流。

因此，我的问题是，如果我刷新页面，并不发送SUBCAT_ID那么过滤器部分是不创建在ADD.PHP。
我想知道方式如何在页面刷新动作发送的请求中发送SUBCAT_ID。
这是我的下拉菜单代码：

/* SELECT REPLACED BY DIV JS */

    var select = $('.add-item__select').hide(); // Hide original select options

    // Replace each select by div
    select.each(function() {
        var selectVal = $(this).find('.add-item__select-main').text(),
            name = $(this).attr('name');

        newDropdownDiv = $('<input class="add-item__input-select" name="' + name + '" placeholder="' + selectVal + '" readonly required><i class="arrow down"></i></input>')
            .insertAfter($(this))
            .css({paddingLeft: '0.3em', cursor: 'pointer'});
    });

    /* SELECT CATEGORIES AND FILTER CONNECTIONS*/

    // Declare variables
    var inputSelectCat = $("input[name=category]"),
        inputSelectSubCat = $("input[name=subcategory]"),
        section = $('.section'),
        arrowDown = inputSelectSubCat.next(),
        catNameOld;

    if (inputSelectSubCat.val() === '') {
        inputSelectSubCat
            .addClass('stop') // Defaultly setup subcategory input as disable until category is not chosen
            .next().hide(); // Defaultly hide arrowdown of input subcategory until category is not chosen
    }

    // Do not hide placehoder after focusin
    inputSelectSubCat.on('focusin', function() {
        inputSelectSubCat.addClass('black-color-placeholder');
    })

    // Get old value of input
    inputSelectCat.on('focusin', function() {
        catNameOld = $(this).val();
    })

    // If change value of category then change options of subcategory
    inputSelectSubCat.on('focusout', function() {

        var subCatNameNew = $(this).val();

        // Send cat id to add.php to change select options in html according to cat id
        $.ajax({
            url: 'add.php',
            type: 'post',
            data: {
                subcat_name_js: subCatNameNew
            }
        }).done(function(html) {
            var filterOptionsNew = $(html).find('#section-filters').find('.add-item__form-data'),
                filterOptionsCurrent = $('#section-filters');

            // Replace current select by new one - data for dropdown list are loaded from select
            filterOptionsCurrent.html(filterOptionsNew);

            // Replace each select by div
            var filtersSelect = $('#section-filters').find('select');

            // Create dropdown list for all new inputs in filter section
            filtersSelect.each(function() {
                var selectVal = $(this).find('.add-item__select-main').text(),
                    name = $(this).attr('name');

                newDropdownDiv = $('<input class="add-item__input-select" name="' + name + '" placeholder="' + selectVal + '" readonly required><i class="arrow down"></i></input>')
                    .insertAfter($(this))
                    .css({paddingLeft: '0.3em', cursor: 'pointer'});
            });

            // Show filters section
            $('#filters, #section-filters').show();

            // Hide all select elements inside filters section
            $('#section-filters').find('select').hide();

            // Count all added fields
            var filtersInputs = $('#section-filters').find('.add-item__input-select');

            filtersInputs.each(function() {

                // Count inputs
                if ( ($(this).val() === "") && $(this).is(':required') && !localStorage.getItem('allFieldsCount') ) {
                    allFieldsCount += 1;
                }
            })

            // Save modified field count in local storage
            localStorage.setItem('allFieldsCount', allFieldsCount);
        })
    });

    // Allow subcategory input always if category is chosen and value is not empty
    $( window ).on('load', function() {
         console.log(inputSelectCat.val());
        if (inputSelectCat.val() !== '') {
            arrowDown.show();
            inputSelectSubCat.removeClass('stop black-color-placeholder');
        }
    })

    //localStorage.clear();

    // If change value of category then change options of subcategory
    inputSelectCat.on('focusout', function() {

        var catNameNew = $(this).val(),
            arrowDown = inputSelectSubCat.next();

        // Send cat id to add.php to change select options in html according to cat id
        $.ajax({
            url: 'add.php',
            type: 'post',
            data: {
                cat_name_js: catNameNew
            }
        }).done(function(html) {

            var subCatMenuNew = $(html).find('select[name=subcategory]'),
                subCatMenuCurrent = $('#section-info').find('select[name=subcategory]');

            // Replace current select by new one - data for dropdown list are loaded from select
            subCatMenuCurrent.html(subCatMenuNew);
        })

        // Allow subcategory input always if category is chosen and value is not empty
        if (catNameNew !== '') {
            arrowDown.show();
            inputSelectSubCat.removeClass('stop black-color-placeholder');
        }

        // If different category is chosen, then clear input value
        if (catNameOld !== catNameNew) {
            inputSelectSubCat.val('');
        }

    });

    /* SELECT REPLACED BY DIV JS */

    var inputSelect = $('.add-item__input-select');

    // Add new div with options after click on select
    section.on('click','.add-item__input-select', function(event) {

        event.preventDefault();

        var currentNewDropdown = $(this).next(),
            currentInput = $(this),
            currentSelect = $(this).parent().find('select');

        // Do not allow to add dropdown list for subcategory if it has class 'stop'
        if ( !currentInput.hasClass('stop')) {

            // Check if new div dropdown already exists if not add new one
            if ( !currentNewDropdown.hasClass('add-item__custom-select-box') ) {
                var newDropdown = $('<div/>') // create new div element
                    .addClass('add-item__custom-select-box') // with class NewDropdown
                    .insertAfter($(this)); // and append it to page
            }
        }

        // If select was already clicked on, then do not create new dropdown list
        if ( !currentInput.hasClass('added') ) {

            // Check each option value and attach it to new dropdown as div
            currentSelect.find('option').each(function(index, element) {

                var option = $(this); // this is the option from the original select
                    currentNewDropdown = $(this).parent().next();

                // If option is disabled do not append it to new dropdown list
                if (!option.prop('disabled')) {
                    // Create dropdown list as copy of original select list
                    var newOption = $('<div/>') // create new div element
                        .addClass('add-item__custom-select-box-items') // with class NewDropdown-item
                        .html(option.html()) // copy content from original option
                        .data('value', option.val()) // copy value from original option
                        .appendTo(newDropdown); // append it to the new dropdown
                }
            })

            // Show new dropdown options after click on select
            if ( !currentInput.hasClass('stop')) {
                currentNewDropdown = $(this).next();
                currentNewDropdown.show();
                currentInput.addClass('added');
            }
        }

    });

    // Remove dropdown list if focusout without value chosen
    section.on('focusout','.add-item__input-select', function() {
        var newDropdown = $(this).parent().find('.add-item__custom-select-box'),
            inputValue = $(this).val();

        newDropdown.remove();
        inputSelect.removeClass('added');
        inputSelect.addClass('black-text');
    });

    // Add value of clicked element to original option
    section.on('mousedown','.add-item__custom-select-box-items', function() {
        var clickedOptionText = $(this).text(), // Get choosen otion text
            clickedOptionVal = $(this).data('value'), // Get choosen option value
            currentInput = $(this).parent().prev(),
            currentSelect = $(this).parent().parent().find('select'),
            newDropdown = $(this).parent();

        currentSelect.val(clickedOptionVal); // Set up value of original select
        currentInput.val(clickedOptionText); // Show chosen value in input
        newDropdown.remove();
        currentInput.removeClass('added');
        currentInput.addClass('black-text');
    });

本地存储的加号代码：

/* SAVE FORM DATA TO LOCAL STORAGE - presistent - saved until submit is not clicked  */

    // The unload event is sent to the window element when the user navigates away from the page for ex. page refresh
    $(window).on('unload', function() {

        // Save values of form fields to local storage
        $(':file, :checkbox, select, textarea, input').each(function() {

            // Due to JS added input instead of select, need to get value from input + add to storage just checked items
            if ( !$(this).hasClass('add-item__select') && !$(this).is(':checkbox') ) {

                // Save value of field to local storage
                localStorage.setItem($(this).attr('name'), $(this).val());

            } else if ( $(this).is(':checked') ) {

                // Save just name of checkbox which is checked
                localStorage.setItem($(this).attr('name'), $(this).val());

            }
        })
    });

    // Get values form local storage if page is refreshed
    $(window).on('load', function() {

        // Save values of form fields to local storage
        $(':file, :checkbox, select, textarea, input').each(function() {

            // Set values for input elements
            if ( !$(this).hasClass('add-item__select') && ( !$(this).is(':checkbox' ) && !$(this).is(':file') ) ) {
                // Get value of field
                fieldValue = localStorage.getItem($(this).attr('name'));

                // Show value of field if fieldValue is not empty
                if (fieldValue.length !== 0) {
                    // Fill value of element by value from from localstorage - all filled fileds must have class counted to be not conted again
                    $(this).val(fieldValue).addClass('black-text counted');

                    // Add label, bcz it is checked just on focusout event
                    $('<label class="add-item__form-label-JS">' + $(this).attr('placeholder') + '</label>').insertBefore($(this));
                    $('.add-item__form-label-JS').css({color: '#888'});
                }

            // Done action just for checkbox
            } else if ( $(this).is(':checkbox') ) {

                // Get value of field
                fieldValue = localStorage.getItem($(this).attr('name'));

                // All filled fileds must have class counted to be not conted again
                // If chekcbox name is same as saved in local storage then set as checked
                if ( fieldValue === $(this).val() ) {
                    $(this).prop('checked', true);
                    $(this).parent().parent().addClass('counted');
                }

                // Remove checkbox value in localstorage each time - bcz of change checked checkboxes
                localStorage.removeItem(fieldValue);

            }
        })
    });

如果POST数据不是在同一请求中发送，而是在页面刷新后请求中发送，则用于从本地存储填充数据代码对于筛选器节不起作用*bcz在加载过程中不可见

谢谢