Dont show hidden div when the select option is in default

Question

I found a simple fiddle.

And I want to implement it in my work..

my issue is that if I reload the page and the selection is the default it should not show any content from my last choice.

Thanks

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>

Fiddle

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

Answer 1

Notice that you are pulling information from localStorage on load.

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

And it gets saved locally whenever you show a list:

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

It keeps pulling the last value from localStorage and showing the list on load.