发布来自多个<选择>元素的网址


Post URL from multiple <select> elements

我有一个带有同位素过滤器的页面。它使用具有哈希历史记录的组合过滤器。因此,每当选择多个过滤器时,它都会像这样更新 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>

我想将每个"选择"元素的所有选定选项的值合并到单个 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) 将选择排除在表单之外,并使用 ID 访问所选值。

2)在表单中创建隐藏的输入字段

3) 使用 onsubmit="mergeSelects()" javascript event。

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