Keep Selected Dropdown Result After Refreshing Page, Jquery

// remove this on your server
let selItems = [{ "sort-item": "option 2" }, { "sort-item2": "option 5" } ];
// uncomment this
// let selItems = JSON.parse(sessionStorage.getItem("SelItem")) || [];  

$(function() {
  if (selItems) {
    selItems.forEach(obj => {
      const [k, v] = Object.entries(obj)[0]
      $("#" + k).val(v)
    })
  }
  $('.term').on("change", function() {
    selItems = $('.term').map(function() {
      return { [this.id]: this.value }
    }).get();
  // remove this
  console.log(selItems);
  // uncomment this on your server
  // sessionStorage.setItem("SelItem", JSON.stringify(selItems))

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="me2000">
  <select id="sort-item" class="term">
    <option value="option 1" data-sort="1">option 1</option>
    <option value="option 2" data-sort="2">option 2</option>
    <option value="option 3" data-sort="3">option 3</option>
  </select>
  <select id="sort-item2" class="term">
    <option value="option 4" data-sort="4">option 4</option>
    <option value="option 5" data-sort="5">option 5</option>
    <option value="option 6" data-sort="6">option 6</option>
  </select>
</div>

keep dropdown selected after refresh

In your code, selectedItem would always be null since you're setting the selected value to the sessionStorage in the if block. Remove the if block and just set the selected option to the sessionStorage immediately:

function showMov(val) {
  sessionStorage.setItem('SelectedItem', val);

  switch (val) {
    case 'dipinjam':
      {
        $('#tarik_form').hide();
        $('#rusak_form').hide();
        $('#pinjam_form').show();
        $('#moveform').attr('action', 'asetpindah.php');
        break;
      }
    case 'ditarik':
      {
        $('#pinjam_form').hide();
        $('#rusak_form').hide();
        $('#tarik_form').show();
        $('#moveform').attr('action', 'asettarik.php');
        break;
      }
    case 'rusak':
      {
        $('#pinjam_form').hide();
        $('#tarik_form').hide();
        $('#rusak_form').show();
        $('#moveform').attr('action', 'asetrusak.php');
        break;
      }
    default:
      {
        $('#pinjam_form').hide();
        $('#tarik_form').hide();
        $('#rusak_form').hide();
      }
  }
}

Also, when the DOM is ready, that is when you should check if the sessionStorage has a SelectedItem:

$(function() {
  var selMovType = document.getElementById('mov_type');
  var selectedItem = sessionStorage.getItem('SelectedItem');

  if (selectedItem) {
    selMovType.value = selectedItem;
  }
});

Here's a jsfiddle.

how to keep dropdown selected after refresh

If you need to retain the data after reloading the page, you have to save the selected value to the database and get the value if the user reloads the page.

How to keep dropdown selected after refresh using jquery

add the attribute "selected" to your selected option tag:

<option label="some label" value="some value" selected>Some text</option>

Keep the last selected option in a select after refreshing JQuery

If you only need it to persist across page refreshes, not different browser sessions, then use the sessionStorage api:

// When changing the filter
var filter = 'Mercedes';
sessionStorage.setItem('last-filter', filter);

// When loading the page (document.ready)
var filter = sessionStorage.getItem('last-filter') || 'all';
if (filter !== 'all') {
    changeFilter(filter);  // your function
}

Only strings can be stored directly. Instead of storing an element, store its element id/class instead. To store other objects, use the JSON.stringify function on your data to serialise it to a string.

If you ever decide you would like the filter to persist across eg browser crashes, then it's easy to switch in the fully compatible localStorage api. Items in localstorage have no specific expiration date, so if expiry is desirable then you'd need to also save the filter date to detect and remove stale items yourself.

Keep the selection check mark after page refresh

You can use localStorage or Session storage:
Below is the implementation for local storage.

$('#submitDropdown > a').click(function(e) {
  event.preventDefault();
  $('#submitDropdown  > a').removeClass('selected');
  $(this).addClass('selected');
  localStorage.setItem('submitDropdown', 'selected');
});

$('#sort_descend > a').click(function(e) {
  event.preventDefault();
  $('#sort_descend  > a').removeClass('selected');
  $(this).addClass('selected');
  localStorage.setItem('sort_descend', 'selected');
});

This will allow you to set the flag for each item.
Link for your reference: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

After refreshing the page, you can add the 'selected' class after reading from local storage.

$( document ).ready(function() {
 if(localStorage.getItem('submitDropdown') === 'selected'){
   $('#sort_descend  > a').addClass('selected');
 }
});

---

Related Topics