Как передать значения параметров кнопке

Question

Я пытаюсь сохранить переменные из опции select/option, а затем получить к ним доступ с помощью кнопки, чтобы отправить функцию javascript, которая будет фильтровать некоторые div на моей странице.

До сих пор я отправлял значение «filter()» при изменении значения. Вот моя разметка:

<select name="Area" onchange="filter(this)"> 
    <option selected>Select</option> 
    <option value="Austin">Austin</option> 
    <option value="San Antonio">San Antonio</option> 
    <option value="Temple">Temple</option> 
</select> 
<select name="Number" onchange="filter(this)"> 
    <option selected>Select</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<a class="button">Submit</a> 

но как сохранить значения всех параметров, а затем отправить их сразу к функции?

Редактировать: Другими словами, как сохранить значение каждой опции и только отправить функцию после нажатия кнопки?

Answer 1

Если бы я получил это право, без JQuery вы можете попробовать это:

document.getElementById("button").onclick = function() { 
    var selects = document.body.getElementsByTagName("select"); 
    var data = []; 

    for (var i = 0; i < selects.length; i++) { 
     data.push(selects[i].value); 
    } 

    destinyFunction(data); 
}; 

Или вы можете использовать JQuery для простоты:

$("#jbutton").on("click", function() { 
    var data = []; 

    $("select").each(function() { 
     data.push($(this).val()); 
    }); 

    destinyFunction(data); 
}); 

скрипку с этими двумя примерами here.

Answer 2

Дайте каждому из ваших выбирает идентификатор атрибута, как:

<select name="Number" onchange="filter(this)" id="Number"> 
... 

Тогда вы можете получить значение каждого в JavaScript с помощью:

var el = document.getElementById('Number'); 
var value = el.options[el.selectedIndex].value; 

Как Замечание, используя onchange в HTML разметке чтобы прикрепить свою обработку событий, это не лучшая практика. This article от quirksmode предлагает хорошее объяснение альтернативных решений. Тем не менее, необходимо учитывать основные кроссбраузерные соображения, поэтому большинство людей предпочитают использовать структуру Javascript, чтобы они в основном были смягчены.