I have a multiselect drop down and on selecting a particular tab i need to open the bootstrap tab, I'm able to only display the tab but the content of the tab is displayed only after I click on the tab, can anyone tell me the mistake i'm doing ?
This is my dropdown code
<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>
This is my script
$('.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();
To display my tabs container i'm using calling the following function DisplayTab() but this displays a particular tab by default and not the selected tab
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();
}
}
How do i display a particular tabs content ?
what about this code that checks the number of selected options and then show the tab.
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();
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.