How to use MoOx pjax in select2 dropdown

Question

I am using pjax. It's working completely fine for previous and next link. In the same page I have select2 dropdown which should act same as previous and next link. I tried adding url of selected dropdown to a tag and then trigger the pjax but to no avail.

Any help/suggestions are welcome. I have tried the following. This is for the previous and next button and it's working perfectly fine. new Pjax({ elements: "div.js-Pjax a", selectors: [".nogallery img", ".bannerBottom", ".dropdownSearch", "article.kinaguidenContent"] }) For the change in simple dropdown I used the following but to no avail.

jQuery(document).on("change", "select#kinaguidenCategoryValues", function() {
    var val = jQuery(this).find("option:selected").val();
    jQuery("a.js-Pjax").attr("href", val);
    new Pjax({
      elements: "a.js-Pjax[href]", // default is "a[href], form[action]"
      selectors: [".nogallery img", ".bannerBottom", ".dropdownSearch", "article.kinaguidenContent"]
    })
    alert(jQuery("a.js-Pjax").attr("href"));
})

Answer 1

I have changed the code as follow and it's working perfectly.

jQuery(document).on("change", "select#kinaguidenCategoryValues", function() {
    var val = jQuery(this).find("option:selected").val();
    jQuery("a.js-Pjax").attr("href", val).trigger("click");
})
jQuery(document).on("click", "a.js-Pjax", function(e) {
    e.preventDefault();
    var url = jQuery(this).attr("href");
    var p = new Pjax({
            elements: "a.js-Pjax",
            selectors: [".nogallery img", ".bannerBottom", ".dropdownSearch", "article.kinaguidenContent"],
        })
   p.loadUrl(url, p.options);

});