Question

我找到了一个简单的小提琴。

我想在我的工作中实施它。

我的问题是，如果我重新加载页面并且选择是默认选项，则不应显示我上次选择的任何内容。

由于

HTML

<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>

小提琴

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

Answer 1

请注意，您在加载时从localStorage中提取信息。

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

每当您显示列表时，它都会在本地保存：

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

它不断从localStorage中提取最后一个值并在加载时显示列表。

当select选项处于默认状态时，不显示隐藏的div

1 个答案: