I tried keep retain selected item after reload triggered by on change value,

but I get this error on console "TypeError: o.nodeName is undefined[Learn More]"

my select :

<select onchange="showMov(this.value);" id="mov_type" name="mov_type" class="form-control" type="text"  />
   <option value="Selected">Choose Type</option>
   <option value="rusak">Rusak</option>
   <option value="dipinjam">Dipinjam</option>
   <option value="ditarik">Ditarik</option>
</select>

my js

function showMov(val){

var selectedItem = sessionStorage.getItem("SelectedItem");  
alert(selectedItem);

    if(selectedItem){
          var dropVal = $(this).val();
           sessionStorage.setItem("SelectedItem", dropVal);
    }

    if (val=="dipinjam"){
        $('#tarik_form').hide();
        $('#rusak_form').hide();
        $('#pinjam_form').show();
        $('#moveform').attr('action','asetpindah.php');
    }else if (val=="ditarik"){
        $('#pinjam_form').hide();
        $('#rusak_form').hide();
        $('#tarik_form').show();
        $('#moveform').attr('action','asettarik.php');
    }else if(val=="rusak"){
        $('#pinjam_form').hide();
        $('#tarik_form').hide();
        $('#rusak_form').show();
        $('#moveform').attr('action','asetrusak.php');
    }else{
        $('#pinjam_form').hide();
        $('#tarik_form').hide();
        $('#rusak_form').hide();
    }
}

I tried keep retain selected item after reload triggered by on change value,

but I get this error on console "TypeError: o.nodeName is undefined[Learn More]"

my select :

<select onchange="showMov(this.value);" id="mov_type" name="mov_type" class="form-control" type="text"  />
   <option value="Selected">Choose Type</option>
   <option value="rusak">Rusak</option>
   <option value="dipinjam">Dipinjam</option>
   <option value="ditarik">Ditarik</option>
</select>

my js

function showMov(val){

var selectedItem = sessionStorage.getItem("SelectedItem");  
alert(selectedItem);

    if(selectedItem){
          var dropVal = $(this).val();
           sessionStorage.setItem("SelectedItem", dropVal);
    }

    if (val=="dipinjam"){
        $('#tarik_form').hide();
        $('#rusak_form').hide();
        $('#pinjam_form').show();
        $('#moveform').attr('action','asetpindah.php');
    }else if (val=="ditarik"){
        $('#pinjam_form').hide();
        $('#rusak_form').hide();
        $('#tarik_form').show();
        $('#moveform').attr('action','asettarik.php');
    }else if(val=="rusak"){
        $('#pinjam_form').hide();
        $('#tarik_form').hide();
        $('#rusak_form').show();
        $('#moveform').attr('action','asetrusak.php');
    }else{
        $('#pinjam_form').hide();
        $('#tarik_form').hide();
        $('#rusak_form').hide();
    }
}

• javascript
• jquery

3 Answers 3

You can use localStorage to store selected value:

 $('#mov_type').on('change', function() {
    // Save value in localstorage
    localStorage.setItem("mov_type", $(this).val());
 });

On page refresh, get the value from localStorage and set to the select:

$(document).ready(function() {
    if ($('#mov_type').length) {
        $('#mov_type').val(localStorage.getItem("mov_type"));
     }
});

localStorage is not supported in all browsers. You can use shims for that or fallback to cookie.

If you want to clear localstorage use

localStorage.removeItem("mov_type");

UPDATE

In your case you need to clear localstorage only if the page is redirected from another page. so you need to check if page gets reloaded or refreshed.

if (performance.navigation.type == 1) {
    console.info( "This page is reloaded" );
} else {
    localStorage.removeItem("mov_type"); // clear localstorage
    console.info( "This page is not reloaded");
}

Not all browsers support window.performance correctly, so you may need to check

if (window.performance) {
  console.info("window.performance work's fine on this browser");
}

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.

Loop through and pare the value to set select attribute:

$('select#id option').each(function() {
    if ($(this).val() == dropVal) {
         $(this).attr('selected', true);
    }
});

Or

$("select#id option[value="+dropVal+"]").attr('selected', true);