javascript — публикация URL-адреса из нескольких тегов & lt; select & gt; элементы
У меня есть страница с изотопным фильтром. Он использует комбинированные фильтры с историей хэшей. Поэтому, если выбрано несколько фильтров, URL обновляется следующим образом:
example.com/portfolio/#.filter1&.filter4&.filter6
Затем у меня есть форма поиска с несколькими элементами «выбор»:
<form id="search-form" method="post">
<select>
<option value="filter1">Filter Name</option>
<option value="filter2">Filter Name</option>
<option value="filter3">Filter Name</option>
</select>
<select>
<option value="filter4">Filter Name</option>
<option value="filter5">Filter Name</option>
<option value="filter6">Filter Name</option>
</select>
...
<input type="submit" value="Search" />
</form>
Я хотел бы объединить значения из всех выбранных опций каждого элемента «select» в один URL и перенаправить на страницу изотопа («портфолио») с этим объединенным значением.
Каков наилучший способ достичь этого? Я не могу понять это.
Решение
Попробуйте это в своем JS:
var data = { 'filters' : arrayHere };
$.ajax({
type: 'POST',
url: 'your url here',
data: data,
success: function(re) {
console.log('this is your return', re);
}
})
Создайте массив, используя $ .each, и заполните все значения внутри массива, а затем отправьте его для просмотра вызова ajax.
Другие решения
1) Оставьте выбранные из формы и используйте идентификаторы для доступа к выбранным значениям.
2) Создать скрытое поле ввода в форме
3) использовать событие onsubmit = «mergeSelects ()» javascript.
4) создать функцию в js
function mergeSelects(){
//get all the values of selects
// append then and generate a string may be
var mergedStringVal = ""; // <--- store values here
// Set it in the hidden input field created in the form and submit them
document.getElementById("mergedSelects").val(mergedStringVal);
}