変更イベントを複数選択して、すべてのAjax経由で送信する

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

あなたはすべてのあなたの選択のためのユニークなクラスを追加し、これを解析することができます。

例1：それぞれが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) 
      } 
     }) 
    }) 
}) 

Answer 2

、単一選択入力変化のために働くの下に持っています識別子の代わりにクラスを使用して解決することができます。このような何か（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 />