Javascript/HTML 表单基于 2 个下拉答案（Shopify）重定向到 url 路径答案

【问题标题】：Javascript/HTML form redirects to a url path based on 2 dropdown answers (Shopify)Javascript/HTML 表单基于 2 个下拉答案（Shopify）重定向到 url 路径
【发布时间】：2021-05-21 08:19:00
【问题描述】：

我正在我的 Shopify 网站上创建一个产品查找器，它会根据客户对 2 个下拉菜单的回答在提交表单时将其重定向到特定路径，但表单提交会将响应附加为搜索 (?genre=fiction) 而不是两个答案的路径（/fiction/）。

目标场景：

下拉 1 个答案：小说

下拉 2 答案：畅销书

--> 点击提交会带你到/fiction/bestsellers

请注意，由于选项以文本形式显示“我正在寻找畅销书的小说书籍”，因此“I正在寻找任何本具有任何主题的书籍，因此脚本不能只在选择更改时运行。

【问题讨论】：

最好提供一个代码示例——比如表单，然后您尝试解决问题。见How to create a Minimal, Reproducible Example

标签： javascript forms shopify

【解决方案1】：

首先，您需要获取两个选择框的值。然后使用 document.location.href 您可以重定向到任何页面。您可以使用与此示例相同的“+”在最终网址中添加更多值。

<html>
   <head>
      <title>jQuery Redirect OnClick</title>
   </head>
<body>

<select id="first">
    <option value="fiction">fiction</option>
    <option value="fiction1">fiction1</option>
</select>

<select id="second">
    <option value="bestsellers">bestsellers</option>
    <option value="bestsellers1">bestsellers1</option>
</select>
<button  id="open_same_window">Submit</button>
 
<!-- include our library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {  
  
   $("#open_same_window").click(function(){
    var firstOption = $('#first').val();
    var secondOption = $('#second').val();
  
   var finalURL = '/' + firstOption + '/' + secondOption;
   
   alert(finalURL);
   document.location.href = finalURL;
   });
  
   
  
});
</script>
 
</body>
</html>

【讨论】：