使用select2.js发送Ajax请求

Question

I have two select elements both using selec2.js, the first select element has drop down options populated from the database, now what I want to do is to choose an option from select element 1, get the value and send that value via ajax to query the database and return matching results and populate the results in the 2nd select element. unfortunately, I haven't succeeded with returning data back from the server, below is my code and oh I am using laravel.

$('#province').on('change', function (e) {
    var data = $("#province option:selected").val();
    $.ajax({
        url: "{{route('list-townships')}}",
        type: 'get',
        data: {
            province_id: data
        },
        success: function (response) {
            console.log(response);
            response.filter(function (response) {
                if (response) {

                   //Append data to the 2nd select element

                }
            })
        },
        error: function (err) {}
    })
});

Answer 1

Okay, I find the issue here, due to laravel CSRF request protection I had forgotten to define the CSRF Token in the ajax header. the complete code is below.

  $(document).ready(function() {
 $.ajaxSetup({
     headers: {
         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
     }
 });
 $('#province').on('change', function(e) {
     var data = $("#province option:selected").val();
     console.log(data);
     $.ajax({
         url: "{{route('list-townships')}}",
         type: 'get',
         data: {
             province_id: data
         },
         success: function(response) {
             console.log(response);
             response.filter(function(response) {
                 if (response) {
                     var townships = new Option(response.name, response.id, false, false);
                     $('#township').append(townships).trigger('open');
                 }
             })
         },
         error: function(err) {}
     })
 });

});