選項選擇，顯示/隱藏表格行

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類row-disabled以更改不透明度。 如果再次選擇A和X ，則該行應該丟失類row-disabled 。 謝謝

Answer 1

您必須bind更改事件處理程序bind到select元素。

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

這是工作解決方案。

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