Как сохранить динамически созданные значения меню после отправки формы? - PullRequest
Новая
       10

Как сохранить динамически созданные значения меню после отправки формы?

0 голосов
/ 19 февраля 2019

Есть две выбранные меню внутри одной формы.Второе меню выбора создается динамически в зависимости от выбора пользователя в первом меню.Как сохранить выбранные значения в меню выбора после отправки формы?

Я использую выбранный плагин выбора для двух меню выбора.Первое меню содержит несколько пицц.Я написал jQuery, который по выбору пользователя читает файл json и записывает новые значения во второе меню.

Сейчас я пытаюсь сохранить оба значения, выбранные пользователем.внутри выбора меню.Я пытался работать с localStorage, который отлично работает, если второе меню не создано функцией изменения.С этим кодом на самом деле ничего не происходит.Я действительно был бы признателен за помощь.Это мой HTML-код: 

<form action="?">
   <select name="selectMenu1" id="pizzamenu1" class="chosen-select pizzamenu" data-placeholder="Pizza wählen" style="width:150px">
          <option value=""/>
          <option value="pizza1">Pizza 1</option>
          <option value="pizza2">Pizza 2</option>
          <option value="pizza3">Pizza 3</option>
   </select>
   <select name="type1" id="type1" class="chosen-select pizzamenu" data-placeholder="Choose veggie" style="width:150px;" onchange="this.form.submit()">
          <option value=""/>
   </select>
</form>

С помощью следующего кода я создаю второе меню: 

$(function () {
    $("#pizzamenu1").change(function () {

        var $dropdown = $(this);

        $.getJSON("resources/json/data.json", function (data) {
            var key = $dropdown.val();
            var vals = [];

            switch (key) {
                case 'pizza1':
                    vals = data.pizza1.split(",");
                    break;
                case 'pizza2':
                    vals = data.pizza2.split(",");
                    break;
                case 'pizza3':
                    vals = data.pizza2.split(",");
                    break;
            }

            var $jsontwo = $("#type1");

            $jsontwo.empty();
            $jsontwo.append("<option value=''>Choose vegetable</option>")
            $.each(vals, function (index, value) {

                $jsontwo.append("<option value=" + value + ">" + value + "</option>");
            });

            $jsontwo.trigger("chosen:updated");

        });
    });
});

И вот мои попытки сохранить оба выбранных значения из моих меню: 

function setStorage() {
    $('.pizzamenu').change(function () {
        localStorage.setItem(this.id, this.value);
    });
}

function keepMenuValues() {
    $(document).ready(function () {
        $('#selectMenu1').val(localStorage.getItem("selectMenu1"));
        $('#type1').val(localStorage.getItem("type1"));
        $('.pizzamenu').trigger("chosen:updated");
    });
}

Ожидаемый результат: Выбранные значения из обоих меню остаются видимыми внутри меню выбора после отправки формы

...