Onchange с несколькими полями ввода

Question

У меня есть панель инструментов с данными, заполненными из базы данных.

Во-первых, у меня есть Select работает как фильтр, как

"выберите X из Y, где fieldX = (Ключ от выбора идет здесь)"

а затем данные из изменений в панели управления.

В настоящее время я использую свойство onchange. Сразу после запуска выбора панель управления изменяется без кнопки отправки.

Но теперь я хочу добавить больше выборок (например, 4, как в форме). Проблема заключается в том, что сразу после выбора выбора панель управления изменяется. Не проблема, только с 1 выбора (ожидаемого эффекта), но я хочу, чтобы выбрать более Выбор полей для добавления дополнительных фильтров на моей приборной панели, как

"выберите X из Y, где fieldX = (Ключ от selectX здесь идет) и fieldZ = (ключ от selectZ идет здесь) и [...] "

(обратите внимание, что пользователь выбирает фильтры. Некоторые поля выбирают могут быть выбраны или нет)

Моего вопроса если есть способ, используя 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. И если у вас есть идентификатор (# селектор), вам не нужно указывать 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.grupo1":

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

JQuery (это использует «выбрать.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'); 
}); 

РНР получит:

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