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

【问题标题】：How to catch #select1 and #select2 values before sent the AJAX request?如何在发送 AJAX 请求之前捕获 #select1 和 #select2 值？
【发布时间】：2016-11-09 14:34:53
【问题描述】：

我有以下 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 调用一起使用。

【问题讨论】：

看起来你已经在field_value 和module 中缓存了值，请尝试在ajax 中使用field: $('#select2 :selected').val(), table_name: $('#select1 :selected').val()
@br3t 你的意思是被浏览器缓存了？如果是这样，是否要禁用此默认行为？
缓存在变量中

标签： javascript jquery ajax select2 jquery-select2-4

【解决方案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;
    },

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

【讨论】：