# AJAX filtering on change select

**URL:** <https://forum.getkirby.com/t/ajax-filtering-on-change-select/13808>\
**Category:** Questions\
**Tags:** v3\
**Created:** [April 15, 2019, 1:14pm UTC](https://forum.getkirby.com/t/ajax-filtering-on-change-select/13808 "2019-04-15T13:14:54Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![wildthing](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/wildthing/32/3457_2.png) [@wildthing](https://forum.getkirby.com/u/wildthing)\
**Post date:** [April 15, 2019, 1:14pm UTC](https://forum.getkirby.com/t/ajax-filtering-on-change-select/13808/1 "2019-04-15T13:14:54Z")

</div>

Hi to all,

I have Ajax listings on page  
and want to create multifilter section that will be update listings on select value.

```
/* AJAX Load More */
$(function(){
 var element = $('.reviews, .bonuses, .games');
 var url = element.data('page') + '.json';
 var limit = parseInt(element.data('limit'));
 var offset = limit;
 
 var search = element.data('search');
 var categories = element.data('categories');

 $('#load-more').on('click', function(e) {

   $.get(url, {limit: limit, offset: offset, search: search, categories: categories}, function(data) {
     if(data.more === false) {
       $('#load-more').hide();
     }

     element.children().last().after(data.html);

     offset += limit;

   });
 });
});

 $("select").on("changed.bs.select", function(e) {
  
   var form_data = $(this).serialize();
   var element = $('.reviews, .bonuses, .games');
   var url = element.data('page');

   $.ajax({
           type: "POST",
           url: url,
           data: $("select").serialize(), // serializes the form's elements.
           success: function(data)
           {

           }
         });

    e.preventDefault(); // avoid to execute the actual submit of the form.
	});

```

With first function everything is ok, and listing loads well.  
If I made script that is send request on click … filter is also works fine:

```
 $("#review-form").submit(function(e) {
  
   var form_data = $(this).serialize();
   var element = $('.reviews, .bonuses, .games');
   var url = element.data('page');

   $.ajax({
           type: "POST",
           url: url,
           data: $("#review-form").serialize(), // serializes the form's elements.
           success: function(data)
           {

           }
         });

    e.preventDefault(); // avoid to execute the actual submit of the form.
	});

```

But how to made function that will be works on select items…

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 15, 2019, 1:28pm UTC](https://forum.getkirby.com/t/ajax-filtering-on-change-select/13808/2 "2019-04-15T13:28:01Z")

</div>

You would have react on a change event: [https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change\_event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)