根据多个 Select2 选择显示多个 div答案

【问题标题】：Show Multple Divs based on Multiple Select2 Selections根据多个 Select2 选择显示多个 div
【发布时间】：2018-11-20 15:19:26
【问题描述】：

我正在尝试制作一个没有复选框的网站，而 jQuery Select2 似乎就是答案。现在，我无法根据多个 Select2 选择显示多个 div。例如，如果在我的下拉列表中选择了 OnBase，我想显示 OnBase div，如果未选择 OnBase，则将其隐藏。

     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>      '

你能帮我实现这个吗？我要疯了，找不到任何其他解决方案。

谢谢

【问题讨论】：

标签： javascript jquery html jquery-select2 jquery-select2-4

【解决方案1】：

查看您的 select2 小部件的文档。它实际上为您提供了一种获取每个选定选项的方法。使用 .select2('data')，它会返回一个选定对象的数组。使用它，以下代码可以满足您的需求：

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

【讨论】：

感谢您对此的帮助。我运行了这段代码 sn-p 它似乎可以工作，但是在将其粘贴到我的代码中时，我在这一行出现语法错误： selected.forEach( (option) => { 任何想法？我对 jQuery 太陌生了，我不能想办法。
它可能不喜欢“胖箭头”功能。我已经更改了代码，仍然可以正常工作。让我知道更新是否有效。
优秀。乐意效劳。现在……你明白我做了什么吗？ ;)
是的！您通过执行 select2('data') 将其设置为获取所有选定的选项。然后，我们传递每个选择的选项并显示其 div： selected.forEach( function(option){ $("#"+option.id).show()
完全正确。只是希望这是一个（也许）可教的时刻。祝你好运！

【解决方案2】：

您所需要的只是每个输入选择器的切换功能。因为 select2 功能提供了一个数组作为 self 值，所以您可以遍历这些值并根据它显示/隐藏每个 div。这是一个例子：

$(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);
    });

  });
});

【讨论】：