How to filter multiple select values?

Question

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.

Yes, i want to make it work with the selectpicker - i named it "Multiple values" — RoyBarOn
– RoyBarOn, Commented May 24, 2017 at 8:04

andreim · Accepted Answer · 2017-05-24 08:23:18Z

1

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.

edited May 24, 2017 at 8:23

answered May 24, 2017 at 8:13

andreim

3,49327 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

RoyBarOn Over a year ago

Thanks - how can i set the "All" option to be the default? when load - all the events disappears

andreim Over a year ago

By using standard HTML - selected attribute, like so - <option value='all' selected>All zones</option>.

RoyBarOn Over a year ago

Thanks - i get an error "Uncaught TypeError: Cannot read property 'includes' of null" - i guess the selectedValues returns null

andreim Over a year ago

@RoyBarOn can you provide the Plunk where you are getting this? Also let me know the browser type and version you are using.

RoyBarOn Over a year ago

I'm getting the error in the Development - not on plunker - i guess it's caused by selectedValues.includes() returns null while unchecking all

|

Saurabh Sharma · Accepted Answer · 2017-05-24 08:19:48Z

1

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

Multiple Selector wasn't provided with values attribute
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

answered May 24, 2017 at 8:19

Saurabh Sharma

2,4724 gold badges22 silver badges42 bronze badges

1 Comment

RoyBarOn Over a year ago

Thanks - i get an error once the $('#multi_zones').val().indexOf(e) is null, any idea how can i fix it?

Doug · Accepted Answer · 2017-05-24 07:53:49Z

0

Try this

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

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

answered May 24, 2017 at 7:53

Doug

6,5352 gold badges32 silver badges34 bronze badges

1 Comment

RoyBarOn Over a year ago

Thanks - I've tried it with the selectpicker but it doesn't worked, i changed it to eventRender: function(event, element) { var zone_class = event.className.toString(); return ['all', zone_class].some(e => $('#zones').val().indexOf(e) >= 0) }, }); $('#zones').on('change',function(){ $('#calendar').fullCalendar('rerenderEvents'); })

Collectives™ on Stack Overflow

How to filter multiple select values?

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related