Javascript 在选项选择上，显示/隐藏表格行

我想根据在选择框中选择的选项显示/隐藏表格行

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>

body {
  margin: 30px;  
}

.row-disabled {
  opacity: 0.2;  
}

$('select').selectpicker();

$(function() {
  $('.selectpicker').on('change', function(){
    var selected = $(this).find("option:selected").val();
  });
});

JAVASCRIPT:

<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>

body {
  margin: 30px;  
}

.row-disabled {
  opacity: 0.2;  
}

$('select').selectpicker();

$(function() {
  $('.selectpicker').on('change', function(){
    var selected = $(this).find("option:selected").val();
  });
});

JSFIDDLE：

---

在上面的小提琴中，未选择

A

和

X

选项，因此同时具有

A

和

X

的行将接收禁用的类

行

，以更改不透明度。如果再次选择了

A

和

X

，则该行将丢失禁用的类

行。谢谢
您必须
将一个更改事件处理程序绑定到您选择的元素

方法
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');

下面是一个带有一些测试的解决方案：

在您的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");
    }
});

jsfiddle:
这适用于任何代码。通过使用类和预先存在的数据代码标记，您可以概括禁用和启用行，如下所示


$（'select'）。selectpicker（）；
$（'.selectpicker'）。在（'change'，function（）上{
var列表=[]；
$（'.selectpicker:selected'）。每个（函数（i，selected）{
列表[i]=$（选定）.text（）；
});
$（'.item'）。每个（函数（）{
if（$（this）.data（'code'）。长度>0）{
变量代码=$（this）.data（'code'）.split（“”）；
if（包含所有（代码、列表））{
$（this.removeClass（'row-disabled'）；
}
else if（包含一个（代码、列表））{
$（this.addClass（'row-disabled'）；
}
}
否则{
$（this.removeClass（'row-disabled'）；
}  	
});
});
函数包含所有（针、干草堆）{
对于（变量i=0，len=pines.length；i

正文{
利润率：30像素；
}
。行已禁用{
不透明度：0.2；
}

A.
B
C
K
X
Y

名称
代码
约翰
A、B、C
玛丽
A X
保罗
Y C K
安迪
由于OP使用的是引导选择，我会使用他们自己的更改事件：changed.bs.select谢谢，这对select remove有效，但当我再次尝试检查时，第一个select已经删除了该类。addClass是否可以具有相同的行为，我的意思是，只有在检查了来自该tr的所有代码的情况下。谢谢again@Khrys，现在看看。@Alexandru IonutMihai，谢谢，但我不敢说它不起作用。示例：取消选中选项A后，选中所有选项。2 tr获取不透明度，但仅当数据代码中的所有代码未选中时，才应获取不透明度。再次感谢汉克斯。这是否适用于tr中的所有代码？我的意思是，在第一个tr中，如果A、B和C未被选中，那么该行应该是alpha。再次感谢。@Khrys，它确实适用于所有代码。ABC应褪色，因为最初未选择A。如果您取消选择Y，那么最后一行将淡出谢谢，但我正在寻找一种方法作为一个小组来完成它。。。因此，只有在A B和C未选中时，第一行才应褪色，反之亦然。谢谢again@Khrys哦，我明白了。我刚刚编辑了演示。你能再检查一下，看看这是不是你想要的功能吗？@Khrys我认为我最近的更改应该满足这个新的需求。