Question

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

在这个函数上我从下拉列表中选择了值并将其保存在本地存储中：

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

您正在设置#Rooms option:selected上的值，这将无效。请改为$("#Rooms").val(...)。

存储值之前的选择也是如此，尽管我猜你的代码也适用于那里。

Answer 2

这有效：

更改下拉列表，然后刷新页面。

   $('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/

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

2 个答案: