LocalStorage: Disabled Select Option Rendered Blank

LocalStorage: Disabled Select Option Rendered Blank

本文关键字：Rendered Blank Option Select Disabled LocalStorage      更新时间：2023-09-26

我使用LocalStorage来记住字段的值。但是，我注意到默认的选择选项（已禁用）变为空白。如何正确渲染？

选择字段

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

加载存储功能

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

首先，您需要在更改select时将所选值保存到localStorage中。

$("#metreSelect").change(function(){
    saveSettings($(this).val());
});
function saveSettings(val) {
    localStorage.setItem("selectedMetre",val );
}

加载页面时，您需要检查保存的值，如果可用，请将该值设置为选定值

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

检查jsfiddle

相关文章：