複数の選択値をフィルタリングする方法は？

Question

私はここで

は私 plunker

eventRender: function(event, element) { 
var zone_class = event.className.toString(); 

return ['all', zone_class].indexOf($('#zones_filter').val()) >= 0; 

}, 

です...、私は単一の値でうまく動作フィルタを作成しましたが、私はそれがselectpickerで動作することはできませんfullcalendarとselectpickerを使用しています

返品に複数の値を追加するにはどうすればよいですか？おかげさまで

Answer 1

ファーストをお試しください：

 <select title="Vacances scolaires" id="zones" class="selectpicker" data-width="fit" 
       multiple="" style="display: none;" name="vacances[]"> 
      <option value='all' selected>All zones</option> 
      <option data-icon="glyphicon glyphicon-zone-a" value="zone_a">Zone A</option> 
      <option data-icon="glyphicon glyphicon-zone-b" value="zone_b">Zone B</option> 
      <option data-icon="glyphicon glyphicon-zone-c" value="zone_c">Zone C</option> 
     </select> 

は、次に、あなたのselectpickerに加入する必要があります。

$('#zones').on('change',function(){ 
    $('#calendar').fullCalendar('rerenderEvents'); 
}); 

そして最後に、あなた選択にあなたのクラスが含まれているかどうかを確認する必要がありますまたはall：

eventRender: function(event, element) { 
    const zone_class = event.className.toString(); 

    const selectedValues = $('#zones').val(); 

    return selectedValues.includes('all') 
     || selectedValues.includes(zone_class); 
    } 

チェックthis Plunker。

Answer 2

あなたoptionの上valueを設定する必要があり、この

eventRender: function(event, element) { 
    var zone_class = event.className.toString(); 

    return ['all', zone_class].some(e => $('#zones_filter').val().indexOf(e) >= 0) 
}, 

Answer 3

あなたのコードを確認した後、私はあなたが逃した複数のものを発見しました。

1. 複数のセレクタが値で提供されていなかったそれは、だから私は選択あなたのマルチセレクターのオプション内id="multi_zones"と値を追加して開始すること<label>ない<lable>

だ

属性。

そして

は、この更新：

eventRender: function(event, element) { 
    var zone_class = event.className.toString(); 

    return ['all', zone_class].some(e => $('#multi_zones').val().indexOf(e) >= 0) 

    }, 

を、呼び出し側更新：

$('#multi_zones').on('change',function(){ 
    $('#calendar').fullCalendar('rerenderEvents'); 
}) 

作業をplunkr here