Показывать множественные деления на основе множественных выборов Select2 - PullRequest
Новая
       13

Показывать множественные деления на основе множественных выборов Select2

0 голосов
/ 20 ноября 2018

Я пытаюсь сделать веб-сайт без флажков, и jQuery Select2 кажется ответом.Теперь я не могу показать несколько div-ов, основанных на нескольких выборках Select2.Например, если в моем раскрывающемся списке выбран OnBase, я хочу показать div OnBase, а если не выбран 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>      '

Можете ли вы помочь мне достичь этого?Я схожу с ума и не мог найти другое решение.

Спасибо

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

Посмотрите документы для своего виджета 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>
0 голосов
/ 20 ноября 2018

Все, что вам нужно, это функция переключения для каждого вашего селектора входа.Поскольку функциональность select2 предоставляет массив как собственное значение, вы можете перебирать эти значения и показывать / скрывать каждый 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);
    });

  });
});
...