使用 Select2 多复选框 JS 插件显示隐藏 table 数据
Using Select2 multi-checkboxes JS Plugin to show-hide table data
我正在尝试使用 Wasikuss 的 Select2 多选框 (https://github.com/wasikuss/select2-multi-checkboxes/) 来隐藏 table 列的基础,即未从下拉列表中选中的选项。
下拉列表中每个选项的'class'对应要隐藏的列'td'的class。
我用来执行此操作的 JQuery 基本上是识别 deselected 选项 (aria-selected=false) 并使用选项 id(与相应列 'td' 的 class 匹配)以识别和隐藏所需的列:
$("#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();
});
});
虽然 multi-select 复选框有效,但显示隐藏列没有按预期工作,不确定我哪里出错了。
完整代码如下:
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>
请让我知道我哪里出错了。 :/
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();
}
});
我正在尝试使用 Wasikuss 的 Select2 多选框 (https://github.com/wasikuss/select2-multi-checkboxes/) 来隐藏 table 列的基础,即未从下拉列表中选中的选项。
下拉列表中每个选项的'class'对应要隐藏的列'td'的class。
我用来执行此操作的 JQuery 基本上是识别 deselected 选项 (aria-selected=false) 并使用选项 id(与相应列 'td' 的 class 匹配)以识别和隐藏所需的列:
$("#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();
});
});
虽然 multi-select 复选框有效,但显示隐藏列没有按预期工作,不确定我哪里出错了。
完整代码如下:
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>
请让我知道我哪里出错了。 :/
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();
}
});