Question

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

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/

在上面的小提琴中，未选择A和X选项，因此同时包含A和X的行会收到类row-disabled改变不透明度。如果再次选择A和X，该行应该会丢失类row-disabled。感谢

Answer 1

您必须bind更改事件处理程序才能选择元素。

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

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

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

3 个答案: