I'm trying to make a website with no check-boxes and jQuery Select2 seems like the answer. Now, I cannot show multiple divs based on multiple Select2 selections. For example, if OnBase is selected in my dropdown, I want to show the OnBase div, and if OnBase is not selected, hide it.
Script to hide my Divs
<script>
$(document).ready(function() {
$('.selectapps').select2();
$('#CNKronos').hide();
$('#Network2').hide();
$('#Network').hide();
$('#OnBase').hide();
});
</script>
Script that only shows the div for the first selection only
<script>
$(function() {
$('#ApplicationsList').change(function(){
$('.selectapps2').hide();
$('#' + $(this).val()).show();
});
});
</script>
Select2 Dropdown
<div id="Applications" class="panel panel-primary" style="width:850px; margin:0 auto; margin-top:10px;">
<div class="panel-heading">
<h3 class="panel-title"><strong>Applications</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
<select class="selectapps selectapps2" id="ApplicationsList" name="ApplicationsList" multiple="multiple" style="width:99%;">
<option value="CNKronos" >CNKronos</option>
<option value="Network2">Drive</option>
<option value="Network">Email</option>
<option value="OnBase">OnBase</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
DIVS
<div id="CNKronos" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px;">
<div class="panel-heading">
<h3 class="panel-title"><strong>CNKronos</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="Network2" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px;">
<div class="panel-heading">
<h3 class="panel-title"><strong>Drive</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="Network" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px;">
<div class="panel-heading">
<h3 class="panel-title"><strong>Email</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="OnBase" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px; ">
<div class="panel-heading">
<h3 class="panel-title"><strong>OnBase</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div> '
Can you please help me achieve this? I'm going nuts and couldn't find any other solution.
Thank you
Take a look at the docs for your select2 widget. It actually gives you a means to get at each selected option. Use .select2('data'), and it returns an array of selected objects. Using that, the following code does what you seem to want:
$(document).ready(function() {
// Create the select2
$('.selectapps').select2();
// hide the sub-panes
$('.selectapps2').hide();
// When our select2 changes...
$('#ApplicationsList').change(function(){
// ... we can get all the selected options
let selected = $(this).select2('data');
// Hide all the panes again
$('.selectapps2').hide();
// Go through the list of options
selected.forEach( function(option){
// and show the one with this id
$("#"+option.id).show()
})
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<div id="Applications" class="panel panel-primary" style="width:850px; margin:0 auto; margin-top:10px;">
<div class="panel-heading">
<h3 class="panel-title"><strong>Applications</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
<select class="selectapps selectapps2" id="ApplicationsList" name="ApplicationsList" multiple="multiple" style="width:99%;">
<option value="CNKronos" >CNKronos</option>
<option value="Network2">Drive</option>
<option value="Network">Email</option>
<option value="OnBase">OnBase</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="CNKronos" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px;">
<div class="panel-heading">
<h3 class="panel-title"><strong>CNKronos</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="Network2" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px;">
<div class="panel-heading">
<h3 class="panel-title"><strong>Drive</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="Network" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px;">
<div class="panel-heading">
<h3 class="panel-title"><strong>Email</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="OnBase" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px; ">
<div class="panel-heading">
<h3 class="panel-title"><strong>OnBase</strong></h3>
</div>
<div class="panel-body">
<table width="825" border="0" class="table table-striped">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>