Javascript 使用下拉菜单显示一个数据表或另一个数据表

我有一个wordpress网站，这两个数据表正常工作和显示，但我尝试合并一个下拉列表，作为一个选择，可以查看一个表或另一个表，但不能同时查看两个表

下面是显示第一个表和隐藏第二个表的当前代码，尽管它只隐藏数据，而不隐藏第二个表的datatable搜索和页面选项。问题是下拉菜单根本不起作用。如果我做了一个选择，它只会显示在框中，但页面上没有任何变化

同样，我要做的就是在页面加载时显示mytable，并有一个包含mytable和mytableSurvey的下拉列表，以及我选择的应该显示的列表

<select name='tables' id='select-tables'>
<option value="mytable">Survey Test Table</option>
<option value="mytableSurvey">Survey Only</option>
</select>

//This is the code for the dropdown 

<script type="text/javascript"   src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
<script type="text/javascript">
(function($) {
$(document).on('change' , '#select-tables', function(){
  var table = $(this).val();
 $('#' + table).show();
 $('table').not('#' + table).hide();
}).change();
}(jQuery));
</script>

<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('#mytable').DataTable();
$('#mytableSurvey').DataTable();
$('.dataTable').wrap('<div class="dataTables_scroll" />');
});
}(jQuery));
</script>

你需要使用

var table = $(this).val();

而不是

var table = $(this).find('option:selected');

所以你的代码应该是

<script type="text/javascript">
$(document).ready(function() {
   $('#mytable').DataTable();
   $('#mytableSurvey').DataTable();
   $('.dataTable').wrap('<div class="dataTables_scroll" />');

   // select change event
   $(document).on('change' , '#select-tables', function(){
     var table = $(this).val();
     $('#' + table +'_wrapper').show();
     $('[id$="_wrapper"]').not('#' + table +'_wrapper').hide();
    }).change();
});
</script>

先前代码

---

有控制台错误吗？我正在WP中使用调试器，因为我不在本地服务器上，但没有看到任何调试器。页面在其周围也正常运行，因此不会导致任何崩溃；而不是var table=$this.find'option:selected'@Mohamed Yousef你从你的回答中得到我的最新消息了吗？我的代码有点问题，没有完全从itI中得到结果。我尝试了这个，它仍然有}jQuery；换钱之后，对吗？这就是我运行它的方式，它仍然不会从中加载选择box@TomN. 答案已更新。。以上代码应该可以很好地工作。我用当前代码更新了我的原始问题。我再次尝试了你给我的东西，但它根本无法构建数据表。只是简单的html表。一旦我用/script和标记拆分代码，表将再次显示，但没有下拉功能。@TomN。事实上，变化会帮你做到这一点。。但是，尽管没有，但您可以像以前一样使用.hide和.show手动创建。。或者您可以复制/粘贴我的代码并尝试again@TomN. 您可以通过添加mytableSurvey_包装{display:none；}来使用css，而不是隐藏和显示

<script type="text/javascript">
    $(document).ready(function() {
       $('#mytable').DataTable();
       $('#mytableSurvey').DataTable();
       $('.dataTable').wrap('<div class="dataTables_scroll" />');

       // select change event
       $('#select-tables').on('change', function(){
         var table = $(this).val();
         $('#' + table).show();
         $('table').not('#' + table).hide();
        }).change();
    });
  </script>