通过javascript回发后保留下拉列表中的选定值

Question

我想在回发后保留下拉列表选择的值，我正在努力理解如何在回发后保留下拉列表选择的值。

在此函数中，我从下拉列表中获取选定的值并将其保存在本地存储中：

document.onreadystatechange = function () {
    if (document.readyState === 'complete') {
        window.localStorage.setItem("Rooms", $("#Rooms option:selected").val());
        window.localStorage.setItem("Persons", $("#Persons option:selected").val());
        window.localStorage.setItem("Childrens", $("#Childrens option:selected").val());
    }
}

在页面加载时，我调用了 adddate() 函数：

function AddDate() {
    var date = moment();

    document.getElementById('Arrival').value = date.format('DD/MM/YYYY');
    document.getElementById('Departure').value = date.add(1, 'days').format('DD/MM/YYYY');
    $("#Arrival").val(window.localStorage.getItem("Arrival"));
    $("#Departure").val(window.localStorage.getItem("Departure"));
    $("#Rooms option:selected").val(window.localStorage.getItem("Rooms"));
    $("#Persons option:selected").val(window.localStorage.getItem("Persons"));
    $("#Childrens    option:selected").val(window.localStorage.getItem("Childrens"));
}; 
window.onload = AddDate;

以下是我的选择列表：

<select id="Rooms" name="Rooms" class="dropdown">
    @for (int i = 1; i <= Model.MaximumNumberOfRooms; i++){
        <option value="@i">@i</option>
    }
</select>

我尝试了许多无效的选项

你有什么建议吗？谢谢。

Answer 1

这行得通：

更改下拉菜单并刷新页面。

   $('document').ready(function(){
      $("#Rooms").val(window.localStorage.getItem("Rooms"));
   });

   $("#Rooms").on('change',function(e){      
       window.localStorage.setItem("Rooms", $("#Rooms option:selected").val()); 
   });

https://jsfiddle.net/HappyiPhone/rpnoarof/1/

Answer 2

您正在设置#Rooms option:selected 的值，这将不起作用。请改用$("#Rooms").val(...)。

在存储值之前进行选择也是如此，尽管我猜你的代码也可以在那里工作。