如何在发送 AJAX 请求之前捕获#select1 和#select2 值？

Question

我有以下 HTML 代码：

<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">

我正在将它们变成 Select2 元素，我正在将 INPUT 更改为 SELECT，然后是 Select2，如下所示：

$(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
            };
        }
      }
    });
  });
});

目前没有任何问题。一旦我发送 AJAX 调用，#select1, #select2 的值就会作为 REQUEST 参数发送，这没关系，但是如果我更改 #select1, #select2 的值并尝试相同的 AJAX请求发送以前的值而不是新值。

我尝试了以下方法但没有用：

$('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();
});

所以我的问题是如何捕捉新值？有什么帮助吗？我试图设置一个 Fiddle 示例 here 但我无法让它与 AJAX 调用一起工作。

Answer 1

只需简单地移动

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

里面

 data: function(params) {

像这样：

   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;
    },

在这种情况下，您将始终检索并发送新参数

如何在发送 AJAX 请求之前捕获#select1 和#select2 值？

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

javascript

ajax

jquery

jquery-select2-4

select2