javascript - 如何通过下拉菜单查看多个表？

Question

如何在一页上有 2 个或更多表格，同时仅查看 1 个表格，通过下拉菜单选择要显示的表格，而无需按钮或刷新页面？有人有想法吗？至少我们需要使用ajax/js。我的表使用数据表插件。这是Fiddle

<select>
<option value='table1'>table1</option>
<option value='table2'>table2</option>
</select>

Answer 1

您可以使用 jquery hide/show 方法来执行相同的操作。

请查看 fiddle

下面的代码处理表格的显示/隐藏

$(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"/>');

    $('#table1').DataTable( {
      "searching": true
    } );
    $('#table2').DataTable( {
      "searching": true
    } );
    $('#table3').DataTable( {
      "searching": true
    } );
    console.log($("#drop"))
    $("#hide"+ $("#drop")[0].value).show(); 
       $("#drop").change(function () {
            var end = this.value;
            $('.hide').hide();
           $("#hide"+end).show(); 
        });
    });