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功能提供了一个数组作为自身值，因此您可以遍历这些值并基于其显示/隐藏每个div。这是一个示例：

         <TreeView  x:Name="ConfigItemTree" VerticalAlignment="Top" ItemsSource="{Binding ConfigTreeRoot}" >
           <TreeView.ContextMenu>
             <ContextMenu >
                <MenuItem x:Name="ContextMenuItems" DisplayMemberPath="Name" />
             </ContextMenu>
         </TreeView.ContextMenu>

Answer 2

看看您的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>

显示基于多个Select2选择的多个Divs

2 个答案: