Question

我有一个选择框。在页面加载时，选择“5”，当我从列表中选择“1”时，我想重新加载页面并默认选择1。我如何在JQuery中实现这一目标。

<span> 
    There are  
    <select class="num_apples form-control">
        <option value="1">1</option>
        <option value="5" selected="selected">5
        </option><option value="50">50</option>
    </select>
    apples on the table
</span>

我尝试在JQuery中执行此操作

$(".num_apples").change (function() {
      $(this).val = $(".num_apples").selected;
      location.reload();
});

Answer 1

保存所选值，并在保存值时检查页面加载并相应地设置select的值：

var selected = localStorage.getItem('selected');
if (selected) {
  $(".num_apples").val(selected);
}


$(".num_apples").change(function() {
  localStorage.setItem('selected', $(this).val());
  location.reload();
});

<强> Example

Answer 2

您可以在本地存储中设置所选值。

<span> 
    There are  
    <select id="mySelect" class="num_apples form-control">
        <option value="1">1</option>
        <option value="5" selected="selected">5</option>
        <option value="50">50</option>
    </select>
    apples on the table
</span>

JavaScript代码：

<script>
    $(document).ready(function(){
        var mySelectBoxVal = localStorage.getItem("mySelectBoxVal");
        if (mySelectBoxVal !== '') {
            $('#mySelect').val(mySelectBoxVal);
        }

        $("#mySelect").on('change',function() {
            selectBoxVal = $('#mySelect').val();
            if (typeof(Storage) !== "undefined") {
                localStorage.setItem("mySelectBoxVal", selectBoxVal);
            } else {
                alert('Sorry! No Web Storage support..');
            }
            location.reload();
        });
    });
</script>

如何在JQuery中选择新值时重新加载页面并更新选择

2 个答案: