如何基於下拉選擇構建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>