通過ajax從多個選擇和發送狀態中捕獲更改事件

我試圖發送一個ajax請求，當表單中的任何選擇輸入發生更改時。如果它們中的任何一個發生改變，我想發送所有選擇輸入的當前值。通過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) 
      } 
     }) 
     }) 
    })

來源

2017-10-12 Yunti

您可以添加您的所有選擇的唯一的類和解析這個。

示例1：每個select發現都是用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) 
      } 
     }) 
    }) 
})

來源

2017-10-12 14:56:52

感謝第二個版本是我正在尋找。然而不幸的是沒有值出現。 'console/log（fixed）'不會輸出任何內容，但是如果我在每個函數之外執行'console.log（e）'，那麼每個select change都會將事件輸出到控制檯。（這是一個'這個'問題？）我也做了一個數組而不是一個對象的過濾器。（我試圖發送一個包含所有選擇值的數組的單個ajax請求 - 對不起，我不認爲我上面已經具體了） – Yunti

明白了，問題在於css類在父元素中而不是select。 – Yunti

我相信有很多可以說的解決方案，可能比我更清潔的，但你想要什麼，如果我沒有錯要做的事可以用一個類來代替標識符來解決。像這樣的東西（不這樣做的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 />

來源

2017-10-12 14:51:43 mitomed

感謝這個工作過於完美。 – Yunti

通過ajax從多個選擇和發送狀態中捕獲更改事件

回答

相關問題