具有多個選擇字段的Onchange

Question

我有一個儀表板，其中包含從數據庫填充的數據。

首先，我有一個Select像過濾器一樣

“ 從Y中選擇X，其中fieldX =（來自select的鍵在這里） ”

然后儀表板中的數據就會更改。

目前，我正在使用onchange屬性。 在選擇被觸發后，儀表板立即更改，沒有提交按鈕。

但是現在，我想放置更多的Selects（像4這樣的表格）。 問題在於，在觸發選擇之后，儀表板會立即更改。 僅用1個select（預期效果）就不是問題，但是我想選擇更多的Selects字段以在儀表板上添加更多過濾器，例如

“ 從Y中選擇X，其中fieldX =（selectX的鍵在這里）和fieldZ =（selectZ的鍵在這里）[...] “

（請注意，用戶選擇過濾器。可能會選擇某些選擇字段，也可能不會選擇）

我的問題是是否存在使用onchange（或不使用onchange）的方法。 也許使用提交按鈕之類的東西？

目前，我正在使用這樣的東西：

//PEGANDO O SELECT REGIONAL PARA O GRÁFICO 
$('select#SELECTID').on('change', function (e) {
  var SELECTID = this.value;
  //url 
  control('ocupantes-aptos/dashboard?SELECTID =' + SELECTID , 'content');
});

Answer 1

一樣。 您將事件綁定到所有涉及的SELECT。 如果您有ID（＃選擇器），則無需指定SELECT。 在回調中，您現在必須顯式檢索每個控件的值：

$('#selectId1, #selectId2, #selectId3').on('change', function () {
  var s1 = $('#selectId1').val();
  var s2 = $('#selectId2').val();
  var s3 = $('#selectId3').val();
  //url 
  control('ocupantes-aptos/dashboard?SELECTID =' + s1 , 'content');
});

或者，您可以為所有這些控件提供特定的類：

$('select.grupo1').on('change', ...

與

<select id="selectId1" class="grupo1">
    ...

注意：jQuery還具有有效地序列化表單或一組控件的功能，因此您無需指定所有那些val() 。

例

在此示例中，只要其中任何一個發生更改，我們都會發送所有 “ grupo1”值。 HTML看起來像一系列元素：

<select name="s[1]" class="grupo1">...</select>
<select name="s[2]" class="grupo1">...</select>

甚至更短一些，使用“＃grupo2 select”而不是“ select.grupo1”：

<div id="grupo2">
<select name="s[1]">...</select>
<select name="s[2]">...</select>

jQuery（這使用“ select.grupo1”作為選擇器）

var sels = $('select.grupo1');
sels.on('change', function() {
    // We want to use the control() function, so
    // we need to build the URL. We may have problems with too many selects,
    // and in that case we will need to modify control().
    control('ocupantes-aptos/dashboard?' + sels.serialize(), 'content');
});

PHP將收到：

$selects = $_GET['s'];
foreach ($selects as $num => $val) {
    // Here for example num=1, and val = the selected value of s[1].
}