How to catch #select1 and #select2 values before sent the AJAX request?

Question

I have the following HTML code:

<select id="select1">
  <option value="0">Option 0</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<select id="select2">
  <option value="0">Option 0</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>   
<select id="select3">
  <option value="0">Option 0</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<input type="text" id="select4">

I am turning them into Select2 elements and I am changing the INPUT to be a SELECT and afterwards a Select2 as follow:

$(function() {
    $('#select1').select2();
    $('#select2').select2();

    var field_value = $('#select2 :selected').val();
    var module = $('#select1 :selected').val();

    $('#select3').select2().on('select2:select', function(ev) {
    var condition_type = $(this).val();
    var select_el = '<select id="select4" style="width: 75%" multiple="multiple"></select>';

    $('#select4').replaceWith(select_el);
    $('#select4').select2({
      placeholder: 'Start typing ...',
      tags: true,
      ajax: {
        delay: 200,
        url: '/someUrl',
        minimumInputLength: 2,
        data: function(params) {
          var query = {
            keyword: params.term,
            condition: condition_type,
            field: field_value,
            table_name: module
          }

          return query;
        },
        processResults: function (data) {
            return {
                results: data
            };
        }
      }
    });
  });
});

This is currently working without any problem. As soon as I sent the AJAX call the values of #select1, #select2 are being sent as a REQUEST parameter that's OK but if I change the values of #select1, #select2 and try the same AJAX request the previous values are sent and not the new ones.

I have tried the following but is not working:

$('select#conditions').select2().on('select2:select', function (ev) {
    var condition_type = $(this).val();
    ...
}).on('select2:selecting', function (ev) {
    field_value = $('#select2 :selected').val();
    module = $('#select1 :selected').val();
});

So my question is how do I catch the new values? Any help? I have tried to setup a Fiddle example here but I couldn't make it to work with the AJAX call.

Answer 1

just simply move

var field_value = $('#select2 :selected').val();
var module = $('#select1 :selected').val();

inside

 data: function(params) {

like this:

   data: function(params) {

      var field_value = $('#select2 :selected').val();
      var module = $('#select1 :selected').val();

      var query = {
        keyword: params.term,
        condition: condition_type,
        field: field_value,
        table_name: module
      }

      return query;
    },

in this case you will always retrieve and send fresh params