如何基於下拉選擇建立網址查詢字符串？

我正在嘗試基於我正在處理的電子商務網站的幾個不同參數動態創建一個URL查詢字符串。該站點位於SaaS平臺上，因此服務器端編碼/腳本編寫不存在問題。如何基於下拉選擇建立網址查詢字符串？

要求：

客戶希望能夠基於「完成」進行搜索 - 如鉻，銅等，並在「條件」（全新/二手/翻新的實例）。

應該可以在URL字符串中添加/刪除過濾器，而不會影響其他變量（例如？find = search-term，& category = 1234等）。

當前困難（S）：

現在我不能想出一個辦法去構造動態的基礎上，下拉菜單選擇還是如何讓下拉選擇URL字符串，直到另一個選項被選中頁面加載後仍然存在。

URL實例搜索查詢結構：http://www.domain.com/search.aspx?find=search-term&category=1234&bath-finish=chrome

例如當前的標記（S）：

這是我與工作的下拉列表中選擇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 &濾波器=選定的濾波器值

其中「選擇濾波器值」，在基於該選擇下拉框。

來源

2013-11-05 Ian Svoboda

你設置'selectFilter'當頁面加載，而不是當用戶從菜單中選擇。 – Barmar

嘗試這樣的事情

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

來源

2013-11-05 05:56:22

非常感謝！我覺得我只是在犯一個愚蠢的錯誤，而事實上我是這樣。你知道如何讓下拉值在頁面重新加載之後保持不變嗎？我猜不是最大的交易，但它會有所幫助 –

希望它可以幫助你，

   <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>

來源

2013-11-05 06:00:20

如何基於下拉選擇建立網址查詢字符串？

回答

相關問題