jQuery get the value dropdown and pass it to the second dropdown

Question

I've the following scenario:

1. There is on the homepage a dropdown with some options.
2. On a detailpage there is the same dropdown.
3. What I want is when the user selects one of the dropdown options, the page redirects to the "detail" page with the same dropdown, and remembers the selected option on the home page.

The dropdown code on the homepage is:

<div id="home-dropdown" class="ho-productwijzer-aandachtsgebied">
<h2>1. Aandachtsgebied</h2>
<select id="Productwijzer" name="Productwijzer" size="0" title="">
    <option value="">-Kies een Aandachtsgebied-</option>
    <option value="cat-value1">Option1</option>
    <option value="cat-value2">Option2</option>
    <option value="cat-value3">Option3</option>
    <option value="cat-value4">Option4</option>
    <option value="cat-value5">Option5</option>
    <option value="cat-value6">Option6</option> 
</select>

And dropdown code for the detail page is:

<div id="detail-dropdown" class="ho-productwijzer-aandachtsgebied">
<h2>1. Aandachtsgebied</h2>
<select id="Productwijzer" name="Productwijzer" size="0" title="">
    <option value="">-Kies een Aandachtsgebied-</option>
    <option value="cat-value1">Option1</option>
    <option value="cat-value2">Option2</option>
    <option value="cat-value3">Option3</option>
    <option value="cat-value4">Option4</option>
    <option value="cat-value5">Option5</option>
    <option value="cat-value6">Option6</option> 
</select>

Hopefully someone can help me out with this.

Answer 1

When submitting the form with method="get" the form data will be appended to the URL as a query, e.g. www.example.com/detail.html?Productwijzer=cat-parasieten

Then the window.location.search holds that info as a string, so you can parse it and use that info to initialize the form in $(document).ready().

PS There surely is a handy function to parse the .search string in jquery.

Answer 2

You could pass the selected options as a query string to the details page