使用 Select2 多复选框 JS 插件显示-隐藏表格数据

Posted 2023-05-07

【中文标题】使用 Select2 多复选框 JS 插件显示-隐藏表格数据

【英文标题】：Using Select2 multi-checkboxes JS Plugin to show-hide table data

【发布时间】：2020-01-07 12:10:13

【问题描述】：

我正在尝试使用 Wasikuss 的 Select2 多复选框 (https://github.com/wasikuss/select2-multi-checkboxes/) 来隐藏表格列的基础，即从下拉列表中未选中的选项。

下拉列表中每个选项的“类”对应于要隐藏的列的“td”类。

我用来执行此操作的 JQuery 基本上是识别取消选择的选项 (aria-selected=false) 并使用选项 id 的最后一个元素（与相应列 'td's 的类匹配）来识别并隐藏所需的列：

$("#select2-ColumnCheckbox-results .select2-results__option[aria-selected=false]").each(function ()   
    var ToHide = $(this).attr("id").split('-').slice(-1)[0];
    var column =  ".CompTable table ." + ToHide;
    $(column).hide();
);
);

虽然多选复选框正在工作，但显示隐藏列未按预期工作，不知道我哪里出错了。

以下是完整代码：

jQuery(document).ready(function($) 

  jQuery('#ColumnCheckbox').select2MultiCheckboxes(
    width: '50%'
  )

  $("#select2-ColumnCheckbox-results .select2-results__option[aria-selected=false]").each(function() 
    var ToHide = $(this).attr("id").split('-').slice(-1)[0];
    var column = ".CompTable table ." + ToHide;
    $(column).hide();
  );

);

.CompTable 
  table-layout: fixed;
  width: 50%;
  position: relative;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  margin: 10px;
  border: 1px solid #222;
  text-align: center;


.select2-results__option .wrap:before 
  font-family: fontAwesome;
  color: #999;
  content: "\f096";
  width: 25px;
  height: 25px;
  padding-right: 10px;


.select2-results__option[aria-selected=true] .wrap:before 
  content: "\f14a";

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://rawgit.com/wasikuss/select2-multi-checkboxes/master/select2.multi-checkboxes.js"></script>

<select id="ColumnCheckbox" multiple="multiple">
  <option selected name="Samsung" class="Samsung">Samsung</option>
  <option selected name="Apple" class="Apple">Apple</option>
  <option selected name="Xiomi" class="Xiomi">Xiomi</option>
</select>
<br></br>
<table class="CompTable">
  <thead>
    <th></th>
    <th class="Samsung">Samsung</th>
    <th class="Apple">Apple</th>
    <th class="Xiomi">Xiomi</th>
  </thead>
  <tbody>
    <tr class="Parameter1">
      <td class="Parameter1">Parameter1</td>
      <td class="Parameter1 Samsung">500</td>
      <td class="Parameter1 Apple">300</td>
      <td class="Parameter1 Xiomi">200</td>
    </tr>
    <tr class="Parameter2">
      <td class="Parameter2">Parameter2</td>
      <td class="Parameter2 Samsung">300</td>
      <td class="Parameter2 Apple">500</td>
      <td class="Parameter2 Xiomi">700</td>
    </tr>
    <tr class="Parameter3">
      <td class="Parameter3">Parameter3</td>
      <td class="Parameter3 Samsung">900</td>
      <td class="Parameter3 Apple">200</td>
      <td class="Parameter3 Xiomi">500</td>
    </tr>
  </tbody>
</table>

请让我知道我哪里出了问题。 ：/

【参考方案1】：

    Can you replace your script with the below change event?

    $("#ColumnCheckbox").change(function() 
        var options = $(this).find("option");
        $.each(options,function(i,val)
            var selected = $(this).prop("selected");
            var currentClass = $(this).attr("class");
            if(selected == false)
                $("table.CompTable thead  th." + currentClass).hide();
                $("table.CompTable tbody tr td." + currentClass).hide();
            else
                $("table.CompTable thead  th." + currentClass).show();
                $("table.CompTable tbody tr td." + currentClass).show();
            
        );