CODEWITHSUNDEEP
jquery
RoyBarOn
RoyBarOn

Reputation: 987

How to filter multiple select values?

I'm using selectpicker with fullcalendar, I've created a filter which works well with single values, but I can't make it works with selectpicker...

Here is my plunker

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

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

},

How can I add multiple values in the return? Thanks.

Upvotes: 0

Views: 1124

Answers (3)

andreim
andreim

Reputation: 3503

First you need to set value on your options:

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

Then you need to subscribe to your selectpicker:

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

And finally you need to check if your selection includes your class or all:

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

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

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

Check this Plunker.

Upvotes: 1

Saurabh Sharma
Saurabh Sharma

Reputation: 2472

Ok, After observing your code, I found multiple things that you missed.

  1. Multiple Selector wasn't provided with values attribute
  2. It's <label> not <lable>

So to begin I added an id="multi_zones" and values within the options on your Multiple Selector select.

And updated this:

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

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

  },

And updated the caller:

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

Working plunkr here

Upvotes: 1

Doug
Doug

Reputation: 6497

Try this

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

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

Upvotes: 0

Related Questions