[英]on option select, show/hide table row
I would like to show/hide a table row based on the options selected in the select box. 我想根据选择框中选择的选项显示/隐藏表格行。
HTML: HTML:
<select class="selectpicker" data-selected-text-format="count" data-done-button="true" multiple="" title="Codes">
<option>A</option>
<option selected>B</option>
<option selected>C</option>
<option selected>K</option>
<option>X</option>
<option selected>Y</option>
</select>
<hr>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Codes</th>
</tr>
</thead>
<tbody>
<tr class="" data-codes="A B C">
<td>John</td>
<td>A B C</td>
</tr>
<tr class="row-disabled" data-codes="A X">
<td>Mary</td>
<td>A X</td>
</tr>
<tr class="" data-codes="Y C K">
<td>Paul</td>
<td>Y C K</td>
</tr>
</tbody>
</table>
CSS: CSS:
body {
margin: 30px;
}
.row-disabled {
opacity: 0.2;
}
JAVASCRIPT: JAVASCRIPT:
$('select').selectpicker();
$(function() {
$('.selectpicker').on('change', function(){
var selected = $(this).find("option:selected").val();
});
});
JSFIDDLE: http://jsfiddle.net/np3ev91x/ JSFIDDLE: http : //jsfiddle.net/np3ev91x/
In the fiddle above, the A
and X
options are not selected, so the line that has both A
and X
receive the class row-disabled
to change the opacity. 在上面的小提琴中,未选择
A
和X
选项,因此同时具有A
和X
row-disabled
类row-disabled
以更改不透明度。 If A
and X
is selected again, the line should lose the class row-disabled
. 如果再次选择
A
和X
,则该行应该丢失类row-disabled
。 Thanks 谢谢
You have to bind
a change event handler to you select element. 您必须
bind
更改事件处理程序bind
到select元素。
The method every()
tests whether all elements in the array does not exist in the selected value. 方法
every()
测试数组中的所有元素是否都不存在于所选值中。
$('select').selectpicker().on('changed.bs.select',function(){
var array=$(this).val();
$('table tbody tr').each(function(){
$(this).addClass('row-disabled');
var array2=$(this).find('td').eq(1).text().split(' ');
if(array2.every(elem=>array.indexOf(elem)!=-1)){
$(this).removeClass('row-disabled');
}
});
}).trigger('change');
Here is working solution. 这是工作解决方案。
a solution with some test : 一些测试的解决方案:
in your JS : 在你的JS中:
$('select').selectpicker();
$(".selectpicker").change(function () {
var selectedText = $(this).find("option:selected").text();
if(selectedText.indexOf("A")!=-1 && selectedText.indexOf("X")!=-1){
$('*[data-codes="A X"]').removeClass("row-disabled");
}
else {
$('*[data-codes="A X"]').addClass("row-disabled");
}
});
and the jsfiddle : http://jsfiddle.net/8vwn2m89/1/ 和jsfiddle: http : //jsfiddle.net/8vwn2m89/1/
this works for any codes. 这适用于任何代码。 with the use of classes and the pre-existing data-codes tag, you can generalize the disabling and enabling of rows as shown below.
通过使用类和预先存在的数据代码标记,您可以概括禁用和启用行,如下所示。
$('select').selectpicker(); $('.selectpicker').on('change', function(){ var list = []; $('.selectpicker :selected').each(function(i, selected){ list[i] = $(selected).text(); }); $('.item').each(function() { if ($(this).data('codes').length > 0) { var codes = $(this).data('codes').split(" "); if (containsAll(codes, list)) { $(this).removeClass('row-disabled'); } else if (containsNone(codes, list)) { $(this).addClass('row-disabled'); } } else { $(this).removeClass('row-disabled'); } }); }); function containsAll(needles, haystack){ for(var i = 0 , len = needles.length; i < len; i++){ if($.inArray(needles[i], haystack) == -1) return false; } return true; } function containsNone(needles, haystack){ for(var i = 0 , len = needles.length; i < len; i++){ if($.inArray(needles[i], haystack) != -1) return false; } return true; }
body { margin: 30px; } .row-disabled { opacity: 0.2; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.css" rel="stylesheet"/> <select class="selectpicker" data-selected-text-format="count" data-done-button="true" multiple="" title="Codes"> <option>A</option> <option selected>B</option> <option selected>C</option> <option selected>K</option> <option>X</option> <option selected>Y</option> </select> <hr> <table class="table"> <thead> <tr> <th>Name</th> <th>Codes</th> </tr> </thead> <tr class="item row-disabled" data-codes="ABC"> <td>John</td> <td>AB C</td> </tr> <tr class="item row-disabled" data-codes="AX"> <td>Mary</td> <td>A X</td> </tr> <tr class="item" data-codes="YCK"> <td>Paul</td> <td>YC K</td> </tr> <tr class="item" data-codes=""> <td>Andy</td> <td></td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.