Question

我有一个同位素过滤器的页面。它使用具有哈希历史的组合过滤器。因此，无论何时选择多个过滤器，它都会更新URL：

example.com/portfolio/#.filter1&.filter4&.filter6

然后我有一个包含多个'select'元素的搜索表单：

<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中，并重定向到具有该组合值的同位素（'portfolio'）页面。

实现这一目标的最佳方法是什么？我无法弄明白。

Answer 1

在你的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调用。

Answer 2

1）将选择保留在表单之外，并使用ID访问所选值。

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

从多个<select>元素发布URL </select>

2 个答案: