Question

我尝试在表单中的任何选择输入发生更改时发送ajax请求。如果其中任何一个发生变化，我想发送所有选择输入的当前值。

目前我有以下内容适用于单个选择输入更改

 $(document).ready(function () {
      $('#id_fixed_or_variable').change(function (e) {
        var fixed = $(this).val()
        var filters = [fixed]
        console.log(fixed)
        $.ajax({
          url: '/users/quotes_results_filter/',
          data: {
            'filters': filters
          },
          success: function (data) {
            console.log(data)
            $('.quotes').html(data)
          }
        })
      })
    })

Answer 1

我确信有很多解决方案，可能比我的更清洁，但如果我没错，你想做的事情可以用类而不是标识符来解决。这样的事情（没有做ajax调用）

$(document).ready(function() {
  $('.changeable').change(function(e) {
    console.log(getValues())
  })
})

function getValues() {
  var filters = [];
  $('.changeable').each(function() {
    filters.push($(this).val());
  });
  return filters;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first" class="changeable">
  <option value="FirstOfFirst">First of First</option>
  <option value="SecondOfFirst">Second of First</option>
</select>
<br />
<br />
<select id="second" class="changeable">
  <option value="FirstOfSecond">First of Second</option>
  <option value="SecondOfSecond">Second of Second</option>
</select>
<br />
<br />

Answer 2

您可以为所有选择添加一个唯一的类并解析它。

示例1：找到的每个选择都是使用ajax发送的。

$(document).ready(function () {
    $('.variable-class').change(function (e) {
        $.each($('.variable-class'),function(i,e){
            var fixed = $(this).val()
            var filters = [fixed]
            console.log(fixed)
            $.ajax({
              url: '/users/quotes_results_filter/',
              data: {
                'filters': filters
              },
              success: function (data) {
                console.log(data)
                $('.quotes').html(data)
              }
            })
        })
    })
})

示例2 创建一个对象，将所有选择值推入其中并在发送一个ajax请求之后：

$(document).ready(function () {
    $('.variable-class').change(function (e) {
        var filters = {};
        $.each($('.variable-class'),function(i,e){
            var fixed = $(this).val()
            filters.push([fixed])
            console.log(fixed)
        })
        $.ajax({
          url: '/users/quotes_results_filter/',
          data: {
            'filters': filters
          },
          success: function (data) {
            console.log(data)
            $('.quotes').html(data)
          }
        })
    })
})

通过ajax从多个select和send状态捕获更改事件

2 个答案: