Question

一种形式内有两个选择菜单。根据用户在第一个菜单中的选择，动态创建第二个选择菜单。提交表单后，如何将选择的值保留在选择菜单中？

我正在将选择的选择插件用于两个选择菜单。第一菜单包含一些比萨饼。我已经编写了一个jQuery，根据用户的选择，它会读取json文件并将新值写入第二个菜单。

我现在要尝试的是将用户选择的两个值都保留在选择菜单中。我尝试使用localStorage，在第二个菜单不是由change函数创建的情况下，它可以正常工作。使用此代码实际上什么也没发生。我真的很感谢您的帮助。这是我的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");
    });
}

预期输出：提交表单后，两个菜单中选择的值在选择菜单中保持可见

表单提交后如何保持动态创建的菜单值？

0 个答案: