Onchange mit mehr als einem Select-Felder

Question

Ich habe ein Dashboard mit Daten aus der Datenbank gefüllt.

Zuerst habe ich eine Auswahl als Filter arbeiten wie

"wählen X aus Y, wobei FieldX = (Der Schlüssel von den auserwählten hier geht)"

und dann die Daten Änderungen am Dashboard

Derzeit bin ich mit der Onchange Eigenschaft. Direkt nachdem die Auswahl ausgelöst wurde, ändert sich das Dashboard ohne eine Senden-Schaltfläche.

Aber jetzt, ich will mehr Selects setzen (wie 4, wie eine Form). Das Problem ist, dass sich das Dashboard unmittelbar nach dem Auslösen einer Auswahl ändert. Kein Problem mit nur 1 select (erwarteten Effekt), aber ich möchte mehr wählen Wählt Felder, um weitere Filter auf meinem Dashboard hinzufügen wie

"wählen X aus Y, wobei FieldX = (Der Schlüssel von SelectX hier geht) und fieldZ = (der Schlüssel von selectZ geht hier) und [...] "

(beachten Sie, dass der Benutzer die Filter auswählt. Einige wählt Felder oder nicht) ausgewählt werden können

Meine Frage wenn es einen Weg gibt, mit onchange (oder nicht), das zu tun. Vielleicht mit einem Senden-Button oder etwas?

Derzeit bin ich mit so etwas wie dies:

//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

Gleiche. Sie binden das Ereignis an alle beteiligten SELECTs. Und wenn Sie eine ID (# Selektor) haben, müssen Sie SELECT nicht angeben. In den Rückruf, haben Sie jetzt explizit den Wert jedes Steuer abrufen:

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

Oder Sie können eine bestimmte Klasse zu all diesen Kontrollen geben:

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

mit

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

Hinweis: jQuery verfügt auch über Funktionen, um ein Formular oder eine Gruppe von Steuerelementen effizient zu serialisieren, sodass Sie nicht alle diese val() s angeben müssen.

Beispiel

In diesem Beispiel senden wir alle die Werte ‚grupo1‘, wenn einer von ihnen ändert. Der HTML-Code sieht aus wie eine Reihe von Elementen:

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

Oder noch kürzer, mit "# grupo2 wählen Sie" statt "select.grupo1":

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

Die jQuery (diese verwendet „wählen.grupo1" als Selektor)

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

Die PHP erhalten:

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