FullCalendar выбирает несколько событий в одном фильтре

Question

Я использую плагин FullCalendar 3.1.0 для отображения событий. Я смог реализовать несколько событий с выпадающим списком. Но пользователь может выбрать только один вариант из одного раскрывающегося фильтра. Моя цель - дать возможность выбрать несколько опций в каждом раскрывающемся списке. Я использую раскрывающееся меню. Но когда я удерживаю CTR и нажимаю опции, он отображает только события для первого параметра в списке. Любая помощь будет принята с благодарностью.

Вот HTML:

<!-- Main view: Title and calendar --> 
<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <h1 id="cal_title">Change Calendar</h1> 
      <div class="search_bar"> 
       <ul id="menu"> 
        Search By: 
        <li> 
         <select id="status_selector" multiple> 
          <option value="all" selected="selected">Status Types - All</option> 
         </select> 
        </li> 
        <li> 
         <select id="group_selector" multiple> 
          <option value="all" selected="selected">Group - All</option> 
         </select> 
        </li> 
        <li> 
         <select id="changeType_selector" multiple> 
          <option value="all" selected="selected">Type of Change - All</option> 
          <option value="6250">Emergency Change</option> 
          <option value="6882">Expedited Change</option> 
          <option value="6249">Normal Change</option> 
          <option value="9999">Standard Change</option> 
         </select> 
        </li> 
        <li> 
         <select id="downtime_selector" multiple> 
          <option value="all" selected="selected">Downtime - All</option> 
          <option value="Yes">Yes</option> 
          <option value="No">No</option> 
         </select> 
        </li> 
       </ul> 
      </div> 
      <div id="calendar"></div> 
      <div id="footer">To ensure optimal performance, only changes created in the past 90 days are shown. For changes older than 90 days please reference EasyVista. <br />If an issue has been found and/or you have a recommendation, please open a ticket for Service Request/Applications/EasyVista - Other Request, explaining the issue or recommendation.</div> 
      <div id="version">SACC v2.0</div> 
     </div> 
    </div> 
</div> 

Вот мой Javascript:

$(document).ready(function() { 

     /* Find all the distinct STATUS_EN and place them into a dropdown list */ 
// This creates first 2 dropdown dynamically 
     $.getJSON('json/events.json',function(json){ 
      var usedStatus = []; // Array to keep track of all STATUS_EN that have been seen 
      var usedGroup = []; // Array to keep track of all group_selector that have been seen 

      // For each object, store the status/group in predefined variables 
      $.each(json, function(i,v){ 
       // If STATUS_EN has not been seen 
       if (usedStatus.indexOf(v.STATUS_EN) == -1){ 
        usedStatus.push(v.STATUS_EN); // Add STATUS_EN to usedStatus 
       } 
       // If responsible_group has not been seen 
       if (usedGroup.indexOf(v.responsible_group) == -1){ 
        usedGroup.push(v.responsible_group); // Add responsible_group to usedStatus 
       } 
      }); 

      // Sort both array variables in alphabetical order. 
      usedStatus.sort(); 
      usedGroup.sort(); 

      // Create the dropdown 
      usedStatus.forEach(function(value){ 
       if (value != undefined){ // If STATUS_EN is not undefined 
        $("#status_selector").append('<option value="'+value+'">'+value+'</option>'); // Create an option for the dropdown list 
       } 
      }); 
      usedGroup.forEach(function(value){ 
       if (value != undefined){ // If responsible_group is not undefined 
        $("#group_selector").append('<option value="'+value+'">'+value+'</option>'); // Create an option for the dropdown list 
       } 
      }); 

     }); 

     /* If end_date is null, return start_date */ 
     function isNull(end_date,start_date){ 
      if(end_date !== null){ 
       return end_date; 
      } else { 
       return start_date; 
      } 
     } 

     /* Calendar structure */ 
     $('#calendar').fullCalendar({ 
      /* Theme enabler */ 
      theme: false, 

      /* Header description */ 
      header: { 
       left: 'prev,today,next', 
       center: 'title', 
       right: 'month,basicWeek,basicDay' 
      }, 

      /* Set the default view to Day */ 
      defaultView: 'basicWeek', 

      /* Arrow stype (Used when theme is enabled) */ 
      themeButtonIcons: { 
       prev: 'circle-triangle-w', 
       next: 'circle-triangle-e' 
      }, 

      /* Text to show in the button */ 
      buttonText: { 
       today: 'Today', 
       month: 'Month', 
       week: 'Week', 
       day: 'Day', 
       list: 'Week List' 
      }, 
      navLinks: true, // Can click day/week names to navigate views 
      editable: false, // Remove permission to move events 
      eventLimit: true, // Allow "more" link when too many events 
      businessHours: true, // grayout afterhours 
      multiple: true, 

      /* Function that allows user to click on event. */ 
      eventClick: function (event, jsEvent, view) { 
       //set the values and open the modal 

       $('#modalTitle').html(event.title); 
       $('#modalBody').html(event.text); 
       $('#eventUrl').attr('href', event.url); 
       $('#eventStatus').html("Status: " + event.STATUS_EN); 
       $('#fullCalModal').modal('show'); 

       return false; // prevent from going to EasyVista right away 
      }, 

      /* Function that shows description when hovering over event */ 
      eventMouseover: function (data, event, view) { 
       tooltip = '<div class="tooltiptopicevent">' 
        + '<strong>Request Number:</strong> ' + data.RFC_NUMBER 
        + '<br /><strong>Status:</strong> ' + data.STATUS_EN 
        + '<br /><strong>Start Date:</strong> ' + moment(data.start).format("MM/D, h:mm:ss a") 
        + '<br /><strong>End Date:</strong> ' + moment(isNull(data.end,data.start)).format("MM/D, h:mm:ss a") 
        + '<br /><strong>Description:</strong> ' + data.text + '</div>'; 
       $("body").append(tooltip); 

       $(this).mousemove(function(event){ 
        $(".tooltiptopicevent").position({ 
         my: "left+3 bottom-3", 
         of: event, 
         collision: "flipfit" 
        }); 
       }); 
      }, 

      /* Hide description when mouse moves out */ 
      eventMouseout: function (data, event, view) { 
       $(this).css('z-index', 8); 
       $('.tooltiptopicevent').remove(); 
      }, 

      /* Feed in events from JSON file through PHP */ 
      events: { 
       url: 'php/get-events.php' 
      }, 


      /* Render the events */ 
      eventRender: function eventRender(event, element, view){ 
       return['all',event.STATUS_EN].indexOf($('#status_selector option:selected').val()) >= 0 
        && ['all',event.responsible_group].indexOf($('#group_selector option:selected').val()) >= 0 
        && ['all',event.change_type].indexOf($('#changeType_selector option:selected').val()) >= 0 
        && ['all',event.downtime].indexOf($('#downtime_selector option:selected').val()) >= 0 
      }, 

      /* Show status loading when loading */ 
      loading: function(bool) { 
       $('#loading').toggle(bool); 
      } 
     }); 

     /* Call on fullCalendar after selection of dropdown option 
     $('#status_selector, #group_selector, #changeType_selector, #downtime_selector').change(function() { 
      $('#calendar').fullCalendar('rerenderEvents'); 
      //$('#calendar').fullCalendar('refetchEvents'); // this allows the spinner to come up each time filter is changed. 
     });*/ 
     /**/ 
     $('#status_selector, #group_selector, #changeType_selector, #downtime_selector').on('change',function(){ 
      $('#calendar').fullCalendar('rerenderEvents'); 
     }); 


    }); 

Пример того, как мой файл .json выглядит следующим образом:

[ 
{ 
    "start": "2016-12-2T17:0:00", 
    "end": "2016-12-2T17:0:00", 
    "title": "12/2/2016 5:00 PM - group1", 
    "url": "https://sample.com", 
    "text": "some needed text", 
    "description": "description of event", 
    "REQUEST_ID": 462820, 
    "STATUS_EN": "Open", 
    "downtime": "No", 
    "change_type": "9999", 
    "responsible_group": "group1", 
    "RFC_NUMBER": "C201612_09454" 
}, 
{ 
    "start": "2017-2-1T21:0:00", 
    "end": "2017-2-1T21:0:00", 
    "title": "2/1/2017 9:00 PM - group2", 
    "url": "https://samplesite.com", 
    "text": "some text", 
    "description": "description of event", 
    "REQUEST_ID": 521157, 
    "STATUS_EN": "Closed", 
    "downtime": "No", 
    "change_type": "6250", 
    "responsible_group": "group2", 
    "RFC_NUMBER": "C201702_00976" 
} 
] 

Answer 1

Ведение .val() в группе выбранных элементов (например, ваш $('#status_selector option:selected').val()) будет возвращать значение только из первого согласованного элемента - как pe r самая первая строка документов: http://api.jquery.com/val/

Таким образом, вам необходимо выполнить цикл и проверить значения всех выбранных параметров и проверить их по отдельности. Что-то вроде этого (непроверено):

  eventRender: function eventRender(event, element, view){ 
      var statusMatch = false; 
      var statusArr = ['all',event.STATUS_EN]; 

      $('#status_selector option:selected').each(function(index, el) 
      { 
       if (statusArr.indexOf($(this).val()) > = 0) statusMatch = true; 
      }); 

      var groupMatch = false; 
      var groupArr = ['all',event.responsible_group]; 

      $('#group_selector option:selected').each(function(index, el) 
      { 
       if (groupArr.indexOf($(this).val()) > = 0) groupMatch = true; 
      }); 

      var changeMatch = false; 
      var changeArr = ['all',event.change_type]; 

      $('#changeType_selector option:selected').each(function(index, el) 
      { 
       if (changeArr.indexOf($(this).val()) > = 0) changeMatch = true; 
      }); 

      var downtimeMatch = false; 
      var downtimeArr = ['all',event.downtime]; 

      $('#downtime_selector option:selected').each(function(index, el) 
      { 
       if (downtimeArr.indexOf($(this).val()) > = 0) downtimeMatch = true; 
      }); 

      return (statusMatch && groupMatch && changeMatch && downtimeMatch); 
     }