具有多个选择字段的Onchange

Question

I have a dashboard with data filled from the database.

First, I have a Select working as a filter like

"select X from Y where fieldX = (The key from select goes here)"

and then the data from dashboard changes.

Currently, I'm using the onchange property. Right after the select is fired the dashboard changes without a submit button.

But now, I want to put more Selects (like 4, like a form). The problem is that right after a select is fired the dashboard changes. Not a problem with just 1 select (expected effect), but I want to select more Selects fields to add more filters on my dashboard like

"select X from Y where fieldX = (The key from selectX goes here) and fieldZ = (The key from selectZ goes here) and [...]"

(note that the user chooses the filters. Some selects fields may be selected or not)

My question if there is a way, using onchange (or not), to do that. Maybe using a submit button or something?

Currently I'm using something like this:

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

Same thing. You bind the event to all involved SELECTs. And if you have an ID (# selector) you need not specify SELECT. In the callback, you now have to explicitly retrieve each control's value:

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

Or you can give a specific class to all those controls:

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

with

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

Note: jQuery also has functions to efficiently serialize a form or a set of controls, so that you need not specify all those val()s.

Example

In this example we send all the 'grupo1' values whenever any of them changes. The HTML looks like a series of elements:

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

Or even shorter, using "#grupo2 select" instead of "select.grupo1":

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

The jQuery (this uses "select.grupo1" as selector)

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

The PHP will receive:

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