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

【问题标题】：How can I build a URL query string based on a dropdown selection?如何根据下拉选择构建 URL 查询字符串？
【发布时间】：2023-04-07 02:42:01
【问题描述】：

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

要求：

客户希望能够根据“完成”（例如 Chrome、Bronze 等）和“条件”（例如新/旧/翻新）执行搜索。

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

当前难度：

现在我无法找到一种方法来根据下拉选项动态构造 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”基于下拉框中的选择。

【问题讨论】：

您在页面加载时设置selectFilter，而不是在用户从菜单中选择时设置。

标签： javascript jquery html

【解决方案1】：

试试这样的

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

【讨论】：

非常感谢！我觉得我只是犯了一个愚蠢的错误，而事实上我似乎是。您知道即使在页面重新加载后我怎样才能使下拉值保持不变？我猜这不是最大的交易，但会有所帮助

【解决方案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>

【讨论】：