how to retain selected value on refreshing page?

Question

jquery

  (function($) {
    $(document).ready( function() {
        $('#client-list').change(function() {
           $(this).attr("selected", true);
            location.reload();
        });
    });
});

dropdown list

  <select id="client-list">
     <option value="Choose-Client">Choose Client</option>
     <option value="client1" >Client 1</option>
     <option value="client2" >Client 2</option>
     <option value="client3" >Client 3</option>
     <option value="client4" >Client 4</option>
  </select>

how can i retain selected value and reload the page onchange dropdown?

what have you tried so far?there are many ways to achieve this goal — guradio, Jun 19 '17 at 09:56
You may find it retains its value on refresh if you add the `autocomplete='on'` attribute. — Mitya, Jun 19 '17 at 09:56
Otherwise use cookies or store it on the server side via sessions or simple variables. — Code Spirit, Jun 19 '17 at 09:56
Possible duplicate of [Global Variable usage on page reload](https://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload) — Joey Ezekiel, Jun 19 '17 at 09:57

score 0 · Answer 1 · answered Jun 19 '17 at 10:05

Store you values in localStorage

First fetch value from localStorage and set it as value of your select, if it's undefined (when run the first time), it will fall back to first element in your select. If it is defined, then your select will have value from localStorage as selected value.

On change, update your value in localStorage

(function($) {
  const selection = localStorage.getItem('selection');
  $(document).ready( function() {
    let $clientList = $('#client-list');
    $clientList.val(selection);
    $clientList.change(function() {
      localStorage.setItem('selection', $(this).val());
    });
  });
});

Raj · Answer 2 · 2017-06-19T11:42:45.150

-1

You can do this using cookies in Jquery by using a plugin.

https://github.com/js-cookie/js-cookie

Download the plugin and include it in your project

<script src="/path/to/js.cookie.js"></script>

To set cookie

Cookies.set('name', 'value');

To read cookie

Cookies.get('name'); // => 'value'

edited Jun 19 '17 at 11:42

answered Jun 19 '17 at 10:01

Raj

1,928
3
29
53

1

Please note that this behaviour is not available in base jQuery, as a plugin is needed. --- Also note that this plugin has been replace by another https://github.com/js-cookie/js-cookie – evolutionxbox Jun 19 '17 at 10:08

how to retain selected value on refreshing page?

2 Answers2