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

Question

I am trying to create a URL query string dynamically based on several different parameters for an ecommerce site I am working on. The site is on a SaaS platform, so server side coding/scripting is out of the question.

Requirements:

Client wants to be able to perform a search based on "finish"—such as Chrome, Bronze, etc and on the "condition" (new/used/refurbished for instance).

The filters should be able to be added/removed from the URL string without impacting the other variables (such as ?find=search-term, &category=1234, etc).

Current difficulty(s):

Right now I cannot figure out a way to contruct the URL string dynamically based on the dropdown choice or how to make the dropdown choice persist after pageload until another option is selected.

URL Example search query structure: http://www.domain.com/search.aspx?find=search-term&category=1234&bath-finish=chrome

Current markup for example(s):

This is the HTML for the dropdown list I am working with so far for just the "Finish" option.

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

This is the script I had attempted to make so far (which only addresses the single filter):

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

The main issue that I am having right now is that the script doesn't seem to read the selected option from the dropdown box and i'm not 100% sure why. Ideally, I'd like to have the URL be very modular so that the selections would have pretty tight control over the URL string.

Example:

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

Where "selected-filter-value" is based upon the selection in the dropdown box.

Answer 1

try something like this

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

Answer 2

Hope it helps you,

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