Question

我使用带有fullcalendar的selectpicker，我创建了一个适用于单个值的过滤器，但是我无法使用selectpicker ...

这是我的plunker

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

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

},

如何在回报中添加多个值？感谢。

Answer 1

首先，您需要在value上设置option：

        <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

好的，在观察了你的代码之后，我发现了你错过的很多东西。

多个选择器未提供值属性
<label>而非<lable>

首先，我在“多选择器”选项的选项中添加了id="multi_zones"和值。

并更新了这个：

  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

Answer 3

试试这个

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

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

如何过滤多个选择值？

3 个答案: