Question

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

要求：

客户希望能够执行基于“完成”的搜索 - 例如Chrome，Bronze等，以及“条件”（例如，新/使用/翻新）。

应该能够在URL字符串中添加/删除过滤器，而不会影响其他变量（例如？find = search-term，＆amp; category = 1234等）。

当前难度：

现在我无法找到一种方法来根据下拉选项动态构建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>

我现在遇到的主要问题是脚本似乎没有从下拉框中读取所选选项，我不是百分之百确定原因。理想情况下，我希望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>

如何根据下拉选择构建URL查询字符串？

2 个答案: