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

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

本文关键字:#select1 #select2 请求 AJAX      更新时间:2023-09-26

我有以下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的值被发送作为一个请求参数,这是可以的,但如果我改变#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示例,但我无法使其与AJAX调用一起工作。

直接移动

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

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