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

所以我的问题是如何捕获新值？有帮助吗？我试图设置一个小提琴示例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值？

1 个答案: