情况：
我有一个使用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();
});
});
答案 0 :(得分：0)
在负责在表格视图之间切换的js代码上，您应该调用sessionStorage.getItem来检索最后选择的视图。
然后只需在正确的元素上调用show()。
答案 1 :(得分：0)
将所选的值保存到cookie或localStorage。加载时，检查是否保存了某个值，如果存在，则将此值设置为选择。
答案 2 :(得分：0)
这是一种愚蠢的做法，但有时愚蠢的想法有效：）
// 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");