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

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();
});

- user6758349

---

localStorage 可能是本地存储。 - depperm

可以在查询字符串/cookie中添加下拉值，并在window.load中检查该值是否设置，然后采取适当的操作。 - Taimur Khan

顺便问一下，为什么你想在下拉框更改时重新加载页面？你使用任何服务器端技术吗？ - Taimur Khan

@TaimurKhan 不，这全部在前端完成。 - user6758349

Answer 1

保存选定的值，并在页面加载时检查是否保存了值并将的值设置为相应的值: var selected = localStorage.getItem('selected'); if (selected) { $(".num_apples").val(selected); } $(".num_apples").change(function() { localStorage.setItem('selected', $(this).val()); location.reload(); }); 示例

- empiric

---

这是完美的。 - user6758349

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>

- Sylvain B