LocalStorage: Disabled Select Option Rendered Blank

Question

I'm using LocalStorage to remember the value of fields. I noticed however that the default select option (disabled) is rendered blank. How do I render it properly?

Select Field

<select name="purchasableId" id="metreSelect" class="metre" required>
    <option value="" disabled selected>Select number of metres</option>
    <option value="one">One</option> 
    <option value="two">Two</option> 
</select>

loadStorage Functions

function loadSettings() {
    $("#metreSelect").val(localStorage.setmetre);
}

function saveSettings() {
    localStorage.setmetre = $("#metreSelect").val();

}

All browsers handle it differently. http://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box — epascarello, Jul 29 '16 at 12:58
When I remove the loadStorage functions then it shows - but I'm using loadStorage to remember the fields (including the placeholder) — Dan Lee, Jul 29 '16 at 13:04

Nageshwar Reddy Pandem · Accepted Answer · 2016-07-29T13:28:11.017

1

First, you need to save the selected value into localStorage on change of select.

$("#metreSelect").change(function(){
    saveSettings($(this).val());
});

function saveSettings(val) {
    localStorage.setItem("selectedMetre",val );
}

while loading the page, you need to check for saved value, if available, set that value as selected value

loadSettings();
function loadSettings() {
    if(localStorage.getItem("selectedMetre")){
    $("#metreSelect").val(localStorage.getItem("selectedMetre"));
    }
}

check jsfiddle

edited Jul 29 '16 at 13:28

answered Jul 29 '16 at 13:11

Nageshwar Reddy Pandem

1,059
9
15

Why then does it remember my select option when I choose one? – Dan Lee Jul 29 '16 at 13:19

LocalStorage: Disabled Select Option Rendered Blank

1 Answers1