當選擇選項為默認時不顯示隱藏的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中提取最后一個值，並顯示加載時的列表。