在选项 select、show/hide table 行

Question

我想 show/hide 一个 table 行，基于 select 在 select 框中输入的选项。

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:

body {
  margin: 30px;  
}

.row-disabled {
  opacity: 0.2;  
}

JAVASCRIPT:

$('select').selectpicker();

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

JSFIDDLE：http://jsfiddle.net/np3ev91x/

在上面的 fiddle 中，A 和 X 选项没有被 select 编辑，所以同时具有 A 和 X 收到 class row-disabled 来改变不透明度。如果 A 和 X 再次被 selected，该行应该丢失 class row-disabled。谢谢

Answer 1

您必须 bind 为您的 select 元素更改事件处理程序。

方法every()测试数组中的所有元素是否不存在于selected值中。

$('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');

这里是working solution.

Answer 2

经过一些测试的解决方案：

在你的 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：http://jsfiddle.net/8vwn2m89/1/

Answer 3

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

$('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="A B C">
  <td>John</td>
  <td>A B C</td>
 </tr>
 <tr class="item row-disabled" data-codes="A X">
  <td>Mary</td>
  <td>A X</td>
 </tr>
 <tr class="item" data-codes="Y C K">
  <td>Paul</td>
  <td>Y C K</td>
 </tr>
  <tr class="item" data-codes="">
  <td>Andy</td>
  <td></td>
 </tr>
</table>

在选项 select、show/hide table 行

on option select, show/hide table row

javascript

jquery

events

bootstrap-select