我正在使用bootstrap-multiselect插件使处理下拉菜单更容易。但是,我在尝试默认隐藏菜单时遇到了问题。
基本上,我有一个复选框,当选中此复选框时,我会显示下拉菜单。当取消选中它时,菜单应该隐藏。默认情况下该复选框处于未选中状态,因此我希望默认情况下也隐藏菜单。
我尝试使用基本的 css 代码隐藏菜单到我的选择菜单,如下所示:
<select name="menu" id="related_calls_menu" style="display: none;" multiple="multiple">....</select>
但这似乎被引导多选中的某些内容覆盖。如果我删除插件,显示/隐藏功能可以正常工作,没有问题。
这是我当前的菜单代码
$(function(){
$("#related_calls_menu").multiselect({
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
selectedClass: null,
selectAllText: 'Select All',
includeSelectAllOption: true,
nonSelectedText: 'Select Related Account(s)',
buttonWidth: '300px'
});
$(window).load(function(){
$("#related_calls_menu").hide();
});
$('#complete_related_calls').click(function(){
if( $(this).is(':checked') )
$("#related_calls_menu").show();
else
$("#related_calls_menu").hide();
});
});
我尝试将 .css('visability: hide; display:none;');
添加到 $("#lated_calls_menu")
我也尝试过添加此代码
$(window).on('load', function(){
$("#related_calls_menu").hide();
});
没有什么真正起作用,我似乎无法隐藏菜单。另外,当我单击复选框显示菜单时,我会看到第二个菜单,它没有插件外观。
这是复选框之前的屏幕截图
这是复选框后的屏幕截图
请多多指教。
最佳答案
Select 标签已被 bootstrap 隐藏。
像这样在你的选择标签周围放置一个包装 div
<div id="mywrapper">
<select name="menu" id="related_calls_menu" style="display: none;" multiple="multiple">.... </select>
</div>
然后你可以像这样控制包装div:
CSS:
#mywrapper{
display:none;
}
jQuery
$("#mywrapper").show();
$("#mywrapper").hide();
关于jquery - 如何使 bootstrap-multiselect 不可见我的默认值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24680477/