当选择选项为默认时不显示隐藏的div

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中提取最后一个值，并显示加载时的列表。