根据多个 Select2 选择显示多个 Div

Question

我正在尝试创建一个没有复选框的网站，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>      '

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

谢谢

Answer 1

您所需要的只是每个输入选择器的切换功能。因为 select2 功能提供了一个数组作为自值，所以您可以迭代这些值，并且 show/hide 每个 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);
    });

  });
});

Answer 2

查看您的 select2 小部件的文档。它实际上为您提供了一种获取每个选定选项的方法。使用 .select2('data')，它 returns 一个选定对象的数组。使用它，以下代码可以完成您似乎想要的操作：

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

根据多个 Select2 选择显示多个 Div

Show Multple Divs based on Multiple Select2 Selections

html

javascript

jquery

jquery-select2

jquery-select2-4