如何基于下拉选择构建URL查询字符串？

Question

我正在尝试根据正在处理的电子商务网站的几个不同参数动态创建URL查询字符串。 该站点位于SaaS平台上，因此不需要服务器端编码/脚本。

要求：

客户希望能够基于“完成”（例如Chrome，青铜等）和“条件”（例如，新的/二手的/翻新的）进行搜索。

应当能够在不影响其他变量（例如？find = search-term，＆category = 1234等）的情况下从URL字符串添加/删除过滤器。

目前的困难：

现在，我无法找出一种基于下拉选项动态构造URL字符串的方法，或者如何使下拉选项在页面加载后持续存在，直到选择了另一个选项。

URL示例搜索查询结构： http : //www.domain.com/search.aspx?find= search-term&category= 1234& bath-finish= chrome

当前标记例如：

到目前为止，这是我正在使用的下拉列表的HTML，仅用于“完成”选项。

<select id="searchbox" name="URL">
<option>Choose Filter ...</option>
<option value="&bath-finish=Chrome">Chrome</option>
<option value="&bath-finish=Bronze">Bronze</option>
<option value="&bath-finish=Black">Black</option>
<option value="&bath-finish=Brass">Brass</option>
<option value="&bath-finish=Copper">Copper</option>
<option value="&bath-finish=Nickel">Nickel</option>
<option value="&bath-finish=Stainless-Steel">Stainless Steel</option>
<option value="&bath-finish=Gold">Gold</option>
<option value="&bath-finish=Silver">Silver</option>
<option value="&bath-finish=Brown">Brown</option>
<option value="&bath-finish=White">White</option>
<option value="&bath-finish=Almond">Almond</option>
<option value="&bath-finish=Bisquit">Bisquit</option>
<option value="&bath-finish=Blue">Blue</option>
<option value="&bath-finish=Clear">Clear</option>
<option value="&bath-finish=Clear-Glass">Clear Glass</option>
<option value="&bath-finish=Wood">Wood</option>
<option value="&bath-finish=Green">Green</option>
<option value="&bath-finish=Grey">Grey</option>
<option value="&bath-finish=Satin">Satin</option>
<option value="&bath-finish=Oil-Rubbed">Oil Rubbed</option>
</select>

到目前为止，这是我尝试制作的脚本（仅针对单个过滤器）：

<script>
var selectFilter= $('#searchbox').val();
$('#searchbox').on("change", function(e){
  document.location.href = 'http://www.domain.com/search.aspx?log=false' + selectFilter;
});
</script>

我现在遇到的主要问题是该脚本似乎没有从下拉框中读取所选的选项，而且我不确定100％为什么。 理想情况下，我希望URL具有高度的模块化，以便选择对URL字符串具有相当严格的控制。

例：

domain.com/search.aspx?find=search-term&filter=selected-filter-value

其中“ selected-filter-value”是基于下拉框中的选择。

Answer 1

尝试这样的事情

    $('#searchbox').on("change", function(e){
        var selectFilter= $(this).val();
      document.location.href = 'http://www.domain.com/search.aspx?log=false' + selectFilter;
    });

Answer 2

希望对您有帮助，

              <script type="text/javascript">
                $(function(){
                    $('#searchbox').on("change", function(){
                        var selectFilter= $(this).val();
                        document.location.href = 'http://www.domain.com/search.aspx?log=false' + selectFilter;
                    });
                }); 
            </script>