Question

我有一个简单的表单，在select标签中选择类别时会显示隐藏的div。

我想要的是当我刷新页面时，内容仍然可见，并且检查的项目仍然存在。

这是示例代码

HTML

<af:resource type="javascript">              

      function customHandler(evt) {
          console.log(evt);

          var exportCmd = AdfPage.PAGE.findComponentByAbsoluteId("pt1:b17");
          console.log(exportCmd);
          var actionEvent = new AdfActionEvent(exportCmd);
          console.log(actionEvent);
          actionEvent.forceFullSubmit();
          actionEvent.noResponseExpected();
          actionEvent.queue(false);

          setTimeout(function(){hidePopup();}, 1000);    


      }                                    

      function hidePopup() {

          var popup = AdfPage.PAGE.findComponent("pt1:popupAceptarDescargarPlantilla::content");

          popup.hide();

      }

    </af:resource>

SCRIPT

<select class="form-control" name="food_type1" id="food_type1">
    <option selected="selected" disabled="disable" value="0">SELECT</option>
    <option value="1">Fruits</option>
    <option value="2">Meat</option>
</select>

<div id="food1" style="display: none;">
    <input type="checkbox" name="food1[]" value="Mango">Mango <br>
    <input type="checkbox" name="food1[]" value="strawberry">Strawberry
</div>

<div id="food2" style="display: none;">
    <input type="checkbox" name="food2[]" value="Beef">Beef <br>
    <input type="checkbox" name="food2[]" value="Pork">Pork <br>
    <input type="checkbox" name="food2[]" value="Chicken">Chicken
</div>

FIDDLE

https://jsfiddle.net/bk2ohogj/

Answer 1

最简单的方法是使用本地存储。我已经更新了你的小提琴，但是在JSFiddle中你将无法测试刷新，所以你必须在你的机器上本地尝试代码。

JSFiddle： https://jsfiddle.net/m0nk3y/bk2ohogj/4/

您必须创建几个函数来实现它。我保持它们尽可能简单，因此它们可能无法解决您的所有用例，但这可以帮助您更接近您想要做的事情：

<强> JS：

$(document).ready(function(){
    var storedItems = [];

    //Store selected items
    function storeItem(item) {
        storedItems.push(item);
        localStorage.setItem("storage", storedItems);
    }

    //Remove item
    function removeItem(item) {
        var index = storedItems.indexOf(item);
        storedItems.splice(index, 1);
    }

    //Show list according to Dropdown
    function showList(type) {
        var $food1 = $("#food1");
        var $food2 = $("#food2");

        localStorage.setItem("list", type);

        if ( type == '1') {
            $food1.show();
            $food2.hide();
        } else if ( type ==  '2') {
            $food2.show();
            $food1.hide();
        } else {
            $food1.hide();
            $food2.hide();
        }
    }

    //Get list type
    if (localStorage.getItem("list")) {
        showList(localStorage.getItem("list"));
    }

    //Get stored items
    if (localStorage.getItem("storage")) {
        storedItems = localStorage.getItem("storage");

        $.each(storedItems, function(i, val) {
            $('input[type="checkbox"][value="'+val+'"]').prop("checked", true);
        });
    }

    //Dropdown
    $('#food_type1').on('change', function() {
        showList(this.value);
    });

    //Checkbox
    $('input[type="checkbox"]').on('change', function() {
        var $this = $(this);
        if ($this.is(':checked')) {
            storeItem(this.val())
        } else {
            removeItem(this.val());
        }
    });
});

Answer 2

您需要一种机制来记住状态并在页面重新/加载时动态设置它们。您可以在脚本中使用会话（如果使用服务器语言生成页面）或cookie。这取决于你的情况。

Answer 3

您可以在db中将状态存储在服务器上。每当状态改变时，向后端发送更新，该更新将存储状态并返回状态。您应该使用此状态填充表单。

您可以在浏览器上使用HTML5本地存储来保留状态。但是，请确保按用户仔细处理。每当页面重新加载时，从本地存储中读取状态并填充表单。如果您有安全问题，请注意浏览器的用户可以看到本地存储的内容。

隐藏的div在刷新时仍然可见

3 个答案: