Javascript 数据表-使用选择框显示/隐藏

我目前有2个工作数据表和一个选择框。目前，它们都显示在页面加载上，然后如果我从选择框中选择一个，它会显示一个并隐藏另一个。选择框在那里工作得很好，但是我想在页面加载时默认只显示一个表，而不是同时显示两个表

以下是带有选择框代码的datatable脚本：

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

<script type="text/javascript"   src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
(function($) {
$(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();
});
}(jQuery));
</script>

显然，我的表ID是mytable和mytableSurvey，因此我不会发布任何实际的表代码，因为所有必要的内容都在这里的datatable脚本中

---

这里的一切都正常，我只是希望在代码中添加一个只在页面加载时显示“mytable”的选项。

一个简单的解决方案是在页面加载时默认选择一个选项。或添加选定的html的任何一个选项的最佳方式

Javascript示例：-

将此添加到$document.ready函数可能会为您完成此操作。

请尝试以下代码：

$(document).ready(function() {
    $('#mytable').DataTable();
    $('#mytableSurvey').DataTable();

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

---

什么是mytable和mytableSurvey？我的两个表的id移除。在这里更改$'[id$=\U wrapper]'。而不是+表+'\U wrapper'.hide；}。更改并尝试$'[id$=\u wrapper]'。不+表+“\u wrapper'.hide；}；完美的多谢各位

$(document).ready(function() {
    $('#mytable').DataTable();
    $('#mytableSurvey').DataTable();

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