刷新后保持下拉菜單處於選中狀態

Question

我嘗試通過更改值觸發重新加載后保留選定的項目，

但我在控制台上收到此錯誤“ TypeError：o.nodeName未定義[了解更多]”

我的選擇：

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

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

Answer 1

您可以使用localStorage存儲選定的值：

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

在頁面刷新時，從localStorage獲取值並將其設置為select：

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

並非所有瀏覽器都支持localStorage 。 您可以為此使用shims或回退到cookie 。

如果您想清除localstorage使用

localStorage.removeItem("mov_type");

更新

在您的情況下，僅當該頁面從另一個頁面redirected ，才需要清除localstorage 。 因此，您需要檢查頁面是否已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");
}

並非所有瀏覽器都正確支持window.performance ，因此您可能需要檢查

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

Answer 2

遍歷並比較值以設置選擇屬性：

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

要么

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

Answer 3

在您的代碼中， selectedItem始終為null，因為您是在if塊中將所選值設置為sessionStorage。 刪除if塊，然后立即將所選選項設置為sessionStorage：

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

另外，在DOM准備就緒時，也就是應該檢查sessionStorage是否具有SelectedItem ：

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

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

這是一個jsfiddle 。