基于下拉列表触发引导选项卡
Trigger bootstrap tab based on dropdown
我有一个多选下拉列表,在选择特定选项卡时,我需要打开引导选项卡,我只能显示选项卡,但选项卡的内容仅在我单击选项卡后显示,谁能告诉我我犯的错误?
这是我的下拉代码
<select name="subrole" id="subrole" class="inversed dropdown multiCheckbx triggerTab" multiple="multiple" ng-model="subrole"
multiselect-dropdown required>
<option value="Actor" class="actor" id="actor" href="Actor"> Actor </option>
<option value="Director" class="director" id="director" href="Director"> Director </option>
<option value="Lyricist" class="lyricist" id="lyricist" href="Lyricist"> Lyricist </option>
<option value="Music Director" class="musicdirector" id="musicdirector" href="MusicDir"> Music Director </option>
<option value="Singer" class="singer" id="singer" href="singer"> Singer </option>
<option value="Standup Comedian" class="standupcomedian" id="standupcomedian" href="standupcomedian"> Standup Comedian </option>
</select>
这是我的脚本
$('.triggerTab').on('change', function(e) {
//var subbtn = document.getElementsByClassName("last")[0];
//$(subbtn).show();
$('#tabscontainer').show();
var selected = new Array();
selected = $('.triggerTab').val();
//alert(selected[0]);
if(jQuery.inArray("Singer", selected) !== -1) {
$($("#myTab").find("li")[0]).show();
}
else {
$($("#myTab").find("li")[0]).hide();
}
DisplayTab();
为了显示我的选项卡容器,我正在使用调用以下函数 DisplayTab(),但这默认显示特定选项卡而不是所选选项卡
function DisplayTab() {
var selecteditems = new Array();
selecteditems = $('#subrole').val();
if(selecteditems!==null && selecteditems.length!== 0)
{
//$('#tab-2').show();
// $('#myTabs a[href="#menu2"]').tab('show') // Select tab by name
$('#tabscontainer').show();
}
else {
//$('#myTabs a[href="#menu2"]').tab('hide') // Select tab by name
$('#tabscontainer').hide();
}
}
如何显示特定的选项卡内容?
检查所选选项的数量然后显示选项卡的代码呢?
if ($("#subrole option:selected").length > 0) {
// You might need a trigger for the tab
$('#tabscontainer').trigger('click');
// or follow your logic if that works
$('#tabscontainer').show();
}
相关文章:
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 如何为下拉列表的每个选项添加一个属性
- jQuery下拉列表未显示第一个选项
- 使用选项组对下拉列表进行排序
- 从下拉列表中禁用其对应项的某些选定选项
- 使用Ajax或JavaScript选择下拉列表选项后,在同一页面上执行PHP脚本
- webforms:在javascript中动态添加下拉列表选项
- 在另一个下拉列表中的选择上切换下拉列表中选项的可见性
- 如果使用jquery在页面加载时未选择任何选项,如何禁用下拉列表
- 从下拉列表中选择其他选项时激活文本框
- 使用下拉列表过滤 ng 重复,而不复制下拉选项
- 如何在多选下拉列表中使选项成为必填/只读选项
- 从选择选项下拉列表中计算多个值
- 更改选择选项下拉列表与onclick功能按钮
- 选择其他字段元素时如何重置选择选项下拉列表
- j使用“选择选项”下拉列表查询多星评级系统
- 如何自动单击选项下拉列表
- 使用ui grid editableCellTemplate中的ng选项下拉列表[ng grid3.x]
- 层次结构和多选项下拉列表(HTML),并在项目之间导航(子节点)
- 从选择选项下拉列表中获取部分值