javascript - How to reload page and update selection when a new value is selected in JQuery - Stack Overflow

admin管理员组

文章数量:1326099

I have a select box. On page load, "5" is selected, when I select "1" from the list, I want to reload the page and have 1 be selected on default. How do I acplish this in 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>

I tried doing this in JQuery

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

I have a select box. On page load, "5" is selected, when I select "1" from the list, I want to reload the page and have 1 be selected on default. How do I acplish this in 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>

I tried doing this in JQuery

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

• javascript
• jquery
• drop-down-menu

Share Improve this question Follow asked Sep 2, 2016 at 18:00 user6758349user6758349 4

• localStorage possibly – depperm Commented Sep 2, 2016 at 18:02
• 1 can add drop down value in query string/cookie and on window.load check if value is set or not and take appropriate action – Taimur Khan Commented Sep 2, 2016 at 18:04
• By the way why you want to reload the page on drop down change? are you using any server side technology? – Taimur Khan Commented Sep 2, 2016 at 18:06
• @TaimurKhan no, this is all done in the front end – user6758349 Commented Sep 2, 2016 at 18:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Save the selected value and check on page load if a value is saved and set the value of the select accordingly:

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


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

---

Example

You can set the selected value in local storage.

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

The JavaScript code :

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

本文标签： javascriptHow to reload page and update selection when a new value is selected in JQueryStack Overflow