刷新页面后保留选定的下拉结果，jquery答案

【问题标题】：Keep selected dropdown result after refreshing page, jquery刷新页面后保留选定的下拉结果，jquery
【发布时间】：2018-05-04 19:56:33
【问题描述】：

情况：

我有一个使用datatables 插件的包含多个表格的页面，我这样做是为了让它当时只显示 1 个，您可以通过下拉菜单选择要在屏幕上显示的一个。

问题：

当我转到我网站上的另一个页面并返回时，它会从下拉菜单返回到 table1，或者当您刷新整个页面时，即使您选择了另一个要显示的表格，它也会返回到 table1。现在我写了一段 jquery 来保持它们被选中，但问题来了。当我选择一个时，它只会在下拉菜单中向我显示正确的选择，但它会继续显示 table1，因为这是下拉菜单中的第一个选项。我希望它有点清楚我试图解释的内容。

我的问题：

如何从下拉选项中显示正确的表格？即使你刷新了页面

到目前为止我的代码：

我已经尝试了几件事，我会将它们发布在下面。也许你们可以看到问题所在。它不会给出任何错误。

HTML 代码：

<div class='dropdown'>
        <select onchange="showMov(this.value);" id='drop' name="mov_type" class='form-control'>
        <option class='keuze' value='table1' selected>Computer</option>
        <option class='keuze' value='table2'>Monitor</option>
        <option class='keuze' value='table3'>Software</option>
        <option class='keuze' value='table4'>Gebruiker</option>
        <option class='keuze' value='table5'>Randapparatuur</option>
        <option class='keuze' value='table6'>Telefoon</option>
        <option class='keuze' value='table7'>Tablet</option>
        <option class='keuze' value='table8'>Laptop</option>
        </select>
</div>

我的刷新的js代码：

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

  switch (val) {
    case 'table2':
      {
        $('#table1_form').hide();
        $('#table3_form').hide();
        $('#table4_form').hide();
        $('#table5_form').hide();
        $('#table6_form').hide();
        $('#table7_form').hide();
        $('#table8_form').hide();
        $('#table2_form').show();
        break;
      }
      case 'table3':
      {
        $('#table1_form').hide();
        $('#table2_form').hide();
        $('#table4_form').hide();
        $('#table5_form').hide();
        $('#table6_form').hide();
        $('#table7_form').hide();
        $('#table8_form').hide();
        $('#table3_form').show();
        break;
      }
      case 'table4':
      {
        $('#table1_form').hide();
        $('#table2_form').hide();
        $('#table3_form').hide();
        $('#table5_form').hide();
        $('#table6_form').hide();
        $('#table7_form').hide();
        $('#table8_form').hide();
        $('#table4_form').show();
        break;
      }
      case 'table5':
      {
        $('#table1_form').hide();
        $('#table2_form').hide();
        $('#table3_form').hide();
        $('#table4_form').hide();
        $('#table6_form').hide();
        $('#table7_form').hide();
        $('#table8_form').hide();
        $('#table5_form').show();
        break;
      }
      case 'table6':
      {
        $('#table1_form').hide();
        $('#table2_form').hide();
        $('#table3_form').hide();
        $('#table4_form').hide();
        $('#table5_form').hide();
        $('#table7_form').hide();
        $('#table8_form').hide();
        $('#table6_form').show();
        break;
      }
      case 'table7':
      {
        $('#table1_form').hide();
        $('#table2_form').hide();
        $('#table3_form').hide();
        $('#table4_form').hide();
        $('#table5_form').hide();
        $('#table6_form').hide();
        $('#table8_form').hide();
        $('#table7_form').show();
        break;
      }
      case 'table8':
      {
        $('#table1_form').hide();
        $('#table2_form').hide();
        $('#table3_form').hide();
        $('#table4_form').hide();
        $('#table5_form').hide();
        $('#table6_form').hide();
        $('#table7_form').hide();
        $('#table8_form').show();
        break;
      }
    default:
      {
        $('#table2_form').hide();
        $('#table3_form').hide();
        $('#table4_form').hide();
        $('#table5_form').hide();
        $('#table6_form').hide();
        $('#table7_form').hide();
        $('#table8_form').hide();
      }
  }
}

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

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

我在下拉菜单中切换表格的js代码：

$(function () {

    $('#table1').wrap('<div id="hidetable1"  class="hide" style="display:none"/>');
    $('#table2').wrap('<div id="hidetable2"  class="hide" style="display:none"/>');
    $('#table3').wrap('<div id="hidetable3"  class="hide" style="display:none"/>');
    $('#table4').wrap('<div id="hidetable4"  class="hide" style="display:none"/>');
    $('#table5').wrap('<div id="hidetable5"  class="hide" style="display:none"/>');
    $('#table6').wrap('<div id="hidetable6"  class="hide" style="display:none"/>');
    $('#table7').wrap('<div id="hidetable7"  class="hide" style="display:none"/>');
    $('#table8').wrap('<div id="hidetable8"  class="hide" style="display:none"/>');


    $('#table1').DataTable( {
      "searching": true,
      "lengthMenu": [[18, -1], [18, "All"]],
      "columnDefs": [{  "bSortable": false, "aTargets": [-1] }, { "bSearchable":false, "aTargets": [-1] }],
      "stateSave": true
    } );
    $('#table2').DataTable( {
      "searching": true,
      "lengthMenu": [[18, -1], [18, "All"]],
      "columnDefs": [{  "bSortable": false, "aTargets": [-1] }, { "bSearchable":false, "aTargets": [-1] }],
      "stateSave": true
    } );
    $('#table3').DataTable( {
      "searching": true,
      "lengthMenu": [[18, -1], [18, "All"]],
      "columnDefs": [{  "bSortable": false, "aTargets": [-1] }, { "bSearchable":false, "aTargets": [-1] }],
      "stateSave": true
    } );
    $('#table4').DataTable( {
      "searching": true,
      "lengthMenu": [[18, -1], [18, "All"]],
      "columnDefs": [{  "bSortable": false, "aTargets": [-1] }, { "bSearchable":false, "aTargets": [-1] }],
      "stateSave": true
    } );
    $('#table5').DataTable( {
      "searching": true,
      "lengthMenu": [[18, -1], [18, "All"]],
      "columnDefs": [{  "bSortable": false, "aTargets": [-1] }, { "bSearchable":false, "aTargets": [-1] }],
      "stateSave": true
    } );
    $('#table6').DataTable( {
      "searching": true,
      "lengthMenu": [[18, -1], [18, "All"]],
      "columnDefs": [{  "bSortable": false, "aTargets": [-1] }, { "bSearchable":false, "aTargets": [-1] }],
      "stateSave": true
    } );
    $('#table7').DataTable( {
      "searching": true,
      "lengthMenu": [[18, -1], [18, "All"]],
      "columnDefs": [{  "bSortable": false, "aTargets": [-1] }, { "bSearchable":false, "aTargets": [-1] }],
      "stateSave": true
    } );
    $('#table8').DataTable( {
      "searching": true,
      "lengthMenu": [[18, -1], [18, "All"]],
      "columnDefs": [{  "bSortable": false, "aTargets": [-1] }, { "bSearchable":false, "aTargets": [-1] }],
      "stateSave": true
    } );
    console.log($("#drop"))
    $("#hide"+ $("#drop")[0].value).show(); 
       $("#drop").change(function () {
            var end = this.value;
            $('.hide').hide();
           $("#hide"+end).show(); 
        }); 
    });

【问题讨论】：

您可以将值存储在 localstorage、cach 或 cookie 中，这是另一种更简单的方法，但您可能不需要将信息存储在隐藏的输入中。 Inputs 将其给定的值存储一小段时间
设置值后，您需要trigger更改选择框上的事件。喜欢 - selMovType.value = selectedItem; $(selMovType).trigger('change');
@Patte 我使用会话存储而不是本地存储只是因为我不希望网站在返回网站后记住您的值
@J.Ende 我可能记错了，但我认为您可以在本地存储上设置超时，并且您也可以在用户离开页面时将其删除
@Patte 与使用本地存储相比，您将如何编写它？顺便说一句，我认为问题主要在于 console.log 部分的另一个 JS 文件

标签： javascript jquery html drop-down-menu

【解决方案1】：

这是一种愚蠢的做法，但有时愚蠢的想法会奏效:)

// Store the div(or other element) html in the storage
localStorage.setItem("data", "Your_html");

// Retrieve your stored html
document.getElementById("show_in_this_div").innerHTML = localStorage.getItem("data");

【讨论】：

你让我上路了，我认为问题不在于存储方式。因为它一直记住下拉菜单的值，而不是我的 menuswitch.js 文件中的值，所以它总是向我显示第一个选择的表。当我找到解决方案时，我会通知您。

【解决方案2】：

在您负责在表格视图之间切换的 js 代码上，您应该调用 sessionStorage.getItem 来检索最后选择的视图。然后只需在正确的元素上调用show()。

【讨论】：

【解决方案3】：

将选定的值保存到cookie 或localStorage。在加载时，检查是否有一些 valuer 被保存，如果存在，将这个值设置为 select。

【讨论】：