Show Multple Divs based on Multiple Select2 Selections

1

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

javascript jquery html jquery-select2 jquery-select2-4

share|improve this question

asked Nov 20 '18 at 15:19

VictorjesgVictorjesg

83

add a comment | 

1

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

javascript jquery html jquery-select2 jquery-select2-4

share|improve this question

asked Nov 20 '18 at 15:19

VictorjesgVictorjesg

83

add a comment | 

1

1

1

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

javascript jquery html jquery-select2 jquery-select2-4

share|improve this question

asked Nov 20 '18 at 15:19

VictorjesgVictorjesg

83

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

javascript jquery html jquery-select2 jquery-select2-4

javascript jquery html jquery-select2 jquery-select2-4

share|improve this question

asked Nov 20 '18 at 15:19

VictorjesgVictorjesg

83

share|improve this question

asked Nov 20 '18 at 15:19

VictorjesgVictorjesg

83

share|improve this question

share|improve this question

asked Nov 20 '18 at 15:19

VictorjesgVictorjesg

83

asked Nov 20 '18 at 15:19

VictorjesgVictorjesg

83

asked Nov 20 '18 at 15:19

VictorjesgVictorjesg

83

83

add a comment | 

add a comment | 

2 Answers
2

active

oldest

votes

0

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>

share|improve this answer

edited Nov 20 '18 at 16:13

answered Nov 20 '18 at 15:45

SnowmonkeySnowmonkey

2,98211012

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for your help on this. I ran this code snippet and it seemed to work but when pasting this into my code, I get syntax error on this line: selected.forEach( (option) => { Any ideas? I'm so new to jQuery I cannot come up with something.
  
  – Victorjesg
  Nov 20 '18 at 16:11
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's possible it doesn't like the "fat arrow" function. I've changed the code, still works the same. Let me know if the update worked.
  
  – Snowmonkey
  Nov 20 '18 at 16:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it worked! Thank you so much!!!
  
  – Victorjesg
  Nov 20 '18 at 16:23
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Excellent. glad to help. Now... do you understand what it was that i did? ;)
  
  – Snowmonkey
  Nov 20 '18 at 16:24
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Yes! you set it to get all selected options by doing select2('data'). Then, we are passing each option selected and showing its div in : selected.forEach( function(option){ $("#"+option.id).show()
  
  – Victorjesg
  Nov 20 '18 at 16:31
  

  
  
  
  

 | 
show 2 more comments

0

All you need is a toggle function for each your input selector. Because select2 functionality provides an array as self value, you can iterate over these values and show/hide each div based on it. Here is an example:

$(document).ready(function() {

  $('.selectapps').select2();

  $('#CNKronos').hide();

  $('#Network2').hide();

  $('#Network').hide();

  $('#OnBase').hide();

  var idSelectors = ["CNKronos", "Network2", "Network", "OnBase"];



  $('#ApplicationsList').change(function(e) {

    var thisValArray = $(this).val();

    idSelectors.forEach(function(idSelector) {

      $('#' + idSelector).toggle(thisValArray.indexOf(idSelector) === -1);

    });



  });

});

share|improve this answer

answered Nov 20 '18 at 15:38

dganencodganenco

2217

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53396155%2fshow-multple-divs-based-on-multiple-select2-selections%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

active

oldest

votes

active

oldest

votes

0

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>

share|improve this answer

edited Nov 20 '18 at 16:13

answered Nov 20 '18 at 15:45

SnowmonkeySnowmonkey

2,98211012

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for your help on this. I ran this code snippet and it seemed to work but when pasting this into my code, I get syntax error on this line: selected.forEach( (option) => { Any ideas? I'm so new to jQuery I cannot come up with something.
  
  – Victorjesg
  Nov 20 '18 at 16:11
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's possible it doesn't like the "fat arrow" function. I've changed the code, still works the same. Let me know if the update worked.
  
  – Snowmonkey
  Nov 20 '18 at 16:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it worked! Thank you so much!!!
  
  – Victorjesg
  Nov 20 '18 at 16:23
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Excellent. glad to help. Now... do you understand what it was that i did? ;)
  
  – Snowmonkey
  Nov 20 '18 at 16:24
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Yes! you set it to get all selected options by doing select2('data'). Then, we are passing each option selected and showing its div in : selected.forEach( function(option){ $("#"+option.id).show()
  
  – Victorjesg
  Nov 20 '18 at 16:31
  

  
  
  
  

 | 
show 2 more comments

0

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>

share|improve this answer

edited Nov 20 '18 at 16:13

answered Nov 20 '18 at 15:45

SnowmonkeySnowmonkey

2,98211012

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for your help on this. I ran this code snippet and it seemed to work but when pasting this into my code, I get syntax error on this line: selected.forEach( (option) => { Any ideas? I'm so new to jQuery I cannot come up with something.
  
  – Victorjesg
  Nov 20 '18 at 16:11
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's possible it doesn't like the "fat arrow" function. I've changed the code, still works the same. Let me know if the update worked.
  
  – Snowmonkey
  Nov 20 '18 at 16:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it worked! Thank you so much!!!
  
  – Victorjesg
  Nov 20 '18 at 16:23
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Excellent. glad to help. Now... do you understand what it was that i did? ;)
  
  – Snowmonkey
  Nov 20 '18 at 16:24
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Yes! you set it to get all selected options by doing select2('data'). Then, we are passing each option selected and showing its div in : selected.forEach( function(option){ $("#"+option.id).show()
  
  – Victorjesg
  Nov 20 '18 at 16:31
  

  
  
  
  

 | 
show 2 more comments

0

0

0

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>

share|improve this answer

edited Nov 20 '18 at 16:13

answered Nov 20 '18 at 15:45

SnowmonkeySnowmonkey

2,98211012

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>

$(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>

$(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>

share|improve this answer

edited Nov 20 '18 at 16:13

answered Nov 20 '18 at 15:45

SnowmonkeySnowmonkey

2,98211012

share|improve this answer

share|improve this answer

edited Nov 20 '18 at 16:13

edited Nov 20 '18 at 16:13

edited Nov 20 '18 at 16:13

answered Nov 20 '18 at 15:45

SnowmonkeySnowmonkey

2,98211012

answered Nov 20 '18 at 15:45

SnowmonkeySnowmonkey

2,98211012

answered Nov 20 '18 at 15:45

SnowmonkeySnowmonkey

2,98211012

2,98211012

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for your help on this. I ran this code snippet and it seemed to work but when pasting this into my code, I get syntax error on this line: selected.forEach( (option) => { Any ideas? I'm so new to jQuery I cannot come up with something.
  
  – Victorjesg
  Nov 20 '18 at 16:11
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's possible it doesn't like the "fat arrow" function. I've changed the code, still works the same. Let me know if the update worked.
  
  – Snowmonkey
  Nov 20 '18 at 16:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it worked! Thank you so much!!!
  
  – Victorjesg
  Nov 20 '18 at 16:23
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Excellent. glad to help. Now... do you understand what it was that i did? ;)
  
  – Snowmonkey
  Nov 20 '18 at 16:24
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Yes! you set it to get all selected options by doing select2('data'). Then, we are passing each option selected and showing its div in : selected.forEach( function(option){ $("#"+option.id).show()
  
  – Victorjesg
  Nov 20 '18 at 16:31
  

  
  
  
  

 | 
show 2 more comments

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for your help on this. I ran this code snippet and it seemed to work but when pasting this into my code, I get syntax error on this line: selected.forEach( (option) => { Any ideas? I'm so new to jQuery I cannot come up with something.
  
  – Victorjesg
  Nov 20 '18 at 16:11
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's possible it doesn't like the "fat arrow" function. I've changed the code, still works the same. Let me know if the update worked.
  
  – Snowmonkey
  Nov 20 '18 at 16:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it worked! Thank you so much!!!
  
  – Victorjesg
  Nov 20 '18 at 16:23
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Excellent. glad to help. Now... do you understand what it was that i did? ;)
  
  – Snowmonkey
  Nov 20 '18 at 16:24
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Yes! you set it to get all selected options by doing select2('data'). Then, we are passing each option selected and showing its div in : selected.forEach( function(option){ $("#"+option.id).show()
  
  – Victorjesg
  Nov 20 '18 at 16:31
  

  
  
  
  

Thank you for your help on this. I ran this code snippet and it seemed to work but when pasting this into my code, I get syntax error on this line: selected.forEach( (option) => { Any ideas? I'm so new to jQuery I cannot come up with something.

– Victorjesg
Nov 20 '18 at 16:11

Thank you for your help on this. I ran this code snippet and it seemed to work but when pasting this into my code, I get syntax error on this line: selected.forEach( (option) => { Any ideas? I'm so new to jQuery I cannot come up with something.

– Victorjesg
Nov 20 '18 at 16:11

It's possible it doesn't like the "fat arrow" function. I've changed the code, still works the same. Let me know if the update worked.

– Snowmonkey
Nov 20 '18 at 16:14

It's possible it doesn't like the "fat arrow" function. I've changed the code, still works the same. Let me know if the update worked.

– Snowmonkey
Nov 20 '18 at 16:14

it worked! Thank you so much!!!

– Victorjesg
Nov 20 '18 at 16:23

it worked! Thank you so much!!!

– Victorjesg
Nov 20 '18 at 16:23

Excellent. glad to help. Now... do you understand what it was that i did? ;)

– Snowmonkey
Nov 20 '18 at 16:24

Excellent. glad to help. Now... do you understand what it was that i did? ;)

– Snowmonkey
Nov 20 '18 at 16:24

1

1

Yes! you set it to get all selected options by doing select2('data'). Then, we are passing each option selected and showing its div in : selected.forEach( function(option){ $("#"+option.id).show()

– Victorjesg
Nov 20 '18 at 16:31

Yes! you set it to get all selected options by doing select2('data'). Then, we are passing each option selected and showing its div in : selected.forEach( function(option){ $("#"+option.id).show()

– Victorjesg
Nov 20 '18 at 16:31

 | 
show 2 more comments

0

All you need is a toggle function for each your input selector. Because select2 functionality provides an array as self value, you can iterate over these values and show/hide each div based on it. Here is an example:

$(document).ready(function() {

  $('.selectapps').select2();

  $('#CNKronos').hide();

  $('#Network2').hide();

  $('#Network').hide();

  $('#OnBase').hide();

  var idSelectors = ["CNKronos", "Network2", "Network", "OnBase"];



  $('#ApplicationsList').change(function(e) {

    var thisValArray = $(this).val();

    idSelectors.forEach(function(idSelector) {

      $('#' + idSelector).toggle(thisValArray.indexOf(idSelector) === -1);

    });



  });

});

share|improve this answer

answered Nov 20 '18 at 15:38

dganencodganenco

2217

add a comment | 

0

All you need is a toggle function for each your input selector. Because select2 functionality provides an array as self value, you can iterate over these values and show/hide each div based on it. Here is an example:

$(document).ready(function() {

  $('.selectapps').select2();

  $('#CNKronos').hide();

  $('#Network2').hide();

  $('#Network').hide();

  $('#OnBase').hide();

  var idSelectors = ["CNKronos", "Network2", "Network", "OnBase"];



  $('#ApplicationsList').change(function(e) {

    var thisValArray = $(this).val();

    idSelectors.forEach(function(idSelector) {

      $('#' + idSelector).toggle(thisValArray.indexOf(idSelector) === -1);

    });



  });

});

share|improve this answer

answered Nov 20 '18 at 15:38

dganencodganenco

2217

add a comment | 

0

0

0

All you need is a toggle function for each your input selector. Because select2 functionality provides an array as self value, you can iterate over these values and show/hide each div based on it. Here is an example:

$(document).ready(function() {

  $('.selectapps').select2();

  $('#CNKronos').hide();

  $('#Network2').hide();

  $('#Network').hide();

  $('#OnBase').hide();

  var idSelectors = ["CNKronos", "Network2", "Network", "OnBase"];



  $('#ApplicationsList').change(function(e) {

    var thisValArray = $(this).val();

    idSelectors.forEach(function(idSelector) {

      $('#' + idSelector).toggle(thisValArray.indexOf(idSelector) === -1);

    });



  });

});

share|improve this answer

answered Nov 20 '18 at 15:38

dganencodganenco

2217

All you need is a toggle function for each your input selector. Because select2 functionality provides an array as self value, you can iterate over these values and show/hide each div based on it. Here is an example:

$(document).ready(function() {

  $('.selectapps').select2();

  $('#CNKronos').hide();

  $('#Network2').hide();

  $('#Network').hide();

  $('#OnBase').hide();

  var idSelectors = ["CNKronos", "Network2", "Network", "OnBase"];



  $('#ApplicationsList').change(function(e) {

    var thisValArray = $(this).val();

    idSelectors.forEach(function(idSelector) {

      $('#' + idSelector).toggle(thisValArray.indexOf(idSelector) === -1);

    });



  });

});

share|improve this answer

answered Nov 20 '18 at 15:38

dganencodganenco

2217

share|improve this answer

share|improve this answer

answered Nov 20 '18 at 15:38

dganencodganenco

2217

answered Nov 20 '18 at 15:38

dganencodganenco

2217

answered Nov 20 '18 at 15:38

dganencodganenco

2217

2217

add a comment | 

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53396155%2fshow-multple-divs-based-on-multiple-select2-selections%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here