CODEWITHSUNDEEP
javascriptjquery
Gusti Aldi
Gusti Aldi

Reputation: 201

keep dropdown selected after refresh

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

Upvotes: 1

Views: 27773

Answers (3)

user6448640
user6448640

Reputation:

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

Upvotes: 3

dork
dork

Reputation: 4568

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.

Upvotes: 2

claireckc
claireckc

Reputation: 455

Loop through and compare 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);

Upvotes: 1

Related Questions