基于两个选择选项的完整日历显示事件

Question

我正在使用 Fullcalendar。我的事件源代码正在获取所有日历事件。事件源为 JSON：

[{ "id": "1", "provider_id": "18", "name":"chris cavage", "location_id":"1"}, 
 { "id": "2", "provider_id": "17", "name":"mark smith", "location_id":"2"}, ...

我在日历上方有两个选择菜单，用于根据提供者和位置显示事件。这是一种过滤所有日历事件的方法：

Providers: <select id="calendar_provider_id">
              <option value="all">All...</option>
              <option value="17">Dr. Carl</option>
              <option value="18">Dr. Paul</option>
           </select>

 Location: <select id="calendar_location_id">
              <option value="all">All...</option>
              <option value="1">A-town</option>
              <option value="12">P-ville</option>
           </select>

When the select options change, I want to re-render the shown events. 我现在只为这样的位置选择菜单工作：

$('#calendar_location_id').change(function() {

            //rerender events for calendar: update the ones shown.
            $('#calendar').fullCalendar('rerenderEvents');

        }
 });

这就是我为 $('#calendar).fullcalendar({

events: 'json_appointments.php',
eventRender: function eventRender( event, element, view ) {
            return ['all', event.location_id].indexOf($('#calendar_location_id option:selected').val()) >= 0;
        }

它只适用于一个选择菜单，但我似乎无法理解如何使这样的东西适用于包括“所有”选项在内的两个选择选项。

这是一个小提琴，向您展示我到目前为止所拥有的东西。如何让第二个菜单选项与第一个菜单选项一起使用，以便过滤器相应地工作？

http://jsfiddle.net/michels287/7h2tn245/

Answer 1

演示：http://jsfiddle.net/xz2mqLhd/

fullCalendar 配置中的相关代码更改：

eventRender: function eventRender(event, element, view) {
      // Check location AND provider id selection
      return ['all', event.location_id].indexOf($('#calendar_location_id option:selected').val()) >= 0 && ['all', event.provider_id].indexOf($('#calendar_provider_id option:selected').val()) >= 0;
    }

还有

// Trigger event rerendering on provider_id change too
$('#calendar_location_id, #calendar_provider_id').change(function() {
    $('#calendar').fullCalendar('rerenderEvents');
  });