页面刷新后保留两个相关下拉列表中的值

Question

我有两个下拉列表，其中在更改第一个下拉列表中的值时，第二个下拉列表附加了基于第一个下拉列表中选择的值的值。

我的代码是：

 $('#orgdropdown').on('change', function() { var selectVal = this.value; switch (selectVal) { case 'Test Company 1': $("#datasources option[value='test']").remove(); $('#datasources').append(`<option value="Test1">TEST1</option>`); $('#datasources').append(`<option value="Test2">Test2</option>`); break; case 'Test Company 2': // console.log('Test Company 1'); $("#datasources option[value='Test1']").remove(); $("#datasources option[value='Test2']").remove(); $('#datasources').append(`<option value="test3">Test3 Data source</option>`); break; default: $("#datasources option[value='Test1']").remove(); $("#datasources option[value='Test2']").remove(); $("#datasources option[value='Test3']").remove(); } }); $('#datasources').on('change', function() { window.location = 'https://location' + this.value; });

 <select class="orgdropdown" id="orgdropdown" name="organization"> <option value="Test Company 1">Test `Company` 1</option> <option value="Test Company 2">Test Company 2</option> </select> <select class="datadropdown" id="datasources" name="data"> <option value="https://location" selected="">Manage Organization Data Source</option> </select>

任何人都可以建议我如何在页面刷新后保留两个下拉列表中的选定值？

Answer 1

使用本地存储。

所以 Stacksnippets 不允许他们，但在你的服务器上试试这个

$('#orgdropdown').on('change', function() {
  var selectVal = this.value;
  localStorage.setItem("orgdropdown",selectVal);
  switch (selectVal) {
    case 'Test Company 1':

      $("#datasources option[value='test']").remove();
      $('#datasources').append(`<option value="Test1">TEST1</option>`);
      $('#datasources').append(`<option value="Test2">Test2</option>`);


      break;
    case 'Test Company 2':
      // console.log('Test Company 1');
      $("#datasources option[value='Test1']").remove();
      $("#datasources option[value='Test2']").remove();
      $('#datasources').append(`<option value="test3">Test3 Data source</option>`);
      break;
    default:
      $("#datasources option[value='Test1']").remove();
      $("#datasources option[value='Test2']").remove();
      $("#datasources option[value='Test3']").remove();


  }

});

$('#datasources').on('change', function() {
  window.location = 'https://location' + this.value;

});
$(function() {
  const orgdropdownval = localStorage.getItem("orgdropdown");
  if (orgdropdownval) {
    $('#orgdropdown').val(orgdropdownval)
    $('#orgdropdown').trigger("change");
  }
})