0

This is the dropdown code I have which creates a query string based on the selection made. The only item left I'm trying to figure out is how to preserve the selection when the page reloads.

<html>
<select id="categoryFilter">
<option value=""></option>
<option name="Category1" id=Category1 value=".">All</option>
<option name="Category2" id=Category2 value="2.1">Processors</option>
<option name="Category3" id=Category3 value="2.4">GPU</option>
<option name="Category4" id=Category4 value="1">Corporate</option>
</select>

<script>
function setSelectedIndex(s, valsearch)
{
// Loop through all the items in drop down list
for (i = 0; i< s.options.length; i++)
{    
    if (s.options[i].value == valsearch)
    {
        // Item is found. Set its property and exit
        s.options[i].selected = true;
        break;
    }
 }
return;
}

function Filter_Init()
{
    var fvalue= JSRequest.QueryString['categoryFilter'];
    setSelectedIndex(document.getElementById('categoryFilter'), decodeURI(fvalue));
}

$('#categoryFilter').change(function() {
window.location = 'http://' + location.hostname + location.pathname + '?' +       $("#categoryFilter option:selected").attr('id') + '=' + $("#categoryFilter option:selected").val() + '#2';
Filter_Init();
});

Rsquare
  • 81
  • 5
  • 1) Most browsers do this by default, 2) You could use the location hash to store the state, or 3) Use cookies – landons Jun 10 '13 at 22:10

2 Answers2

0

You'd have to parse the url string for the query parameters on page load, then have some logic to locate the corresponding element and make it 'selected'. You are most likely better off doing that in a server side language so there is no 'flash' (the element loading in one state than changing to another after the DOM loads).

Try something like this for the Javascript implementation: How can I get query string values in JavaScript?

Community
  • 1
  • 1
gmeluski
  • 58
  • 3
  • 1
    I guess so! I was surprised to see us reference the same SO question too!! – gmeluski Jun 11 '13 at 00:46
  • Thanks for the tip. I decided to take a different approach but accomplishes the same thing I think. I updated the JS so you can see where I'm at. It's not working but any suggestions to why it's not working is appreciated. – Rsquare Jun 17 '13 at 18:32
0

This is how I would tackle the problem.

  1. Extract the query string at the page load.

    How can I get query string values in JavaScript?

  2. Select the correct option according to the incoming query string.

One thing I noted in your query is you are sending query like ?Category2=2.1 and in my opinion it is bit inflexible. Something like ?id=Category2&value=2.1 may be more flexible in the long run.

This JS library is a good candidate for a URL parser library.

http://blog.stevenlevithan.com/archives/parseuri

Community
  • 1
  • 1
tharumax
  • 1,251
  • 9
  • 15
  • Thanks for the tip. I decided to take a different approach but accomplishes the same thing I think. I updated the JS so you can see where I'm at. The reason why I have the query like that is because I have a DVWP in Sharepoint 2007 that it works with. It's how you can pass parameters to the webpart from a query sting. – Rsquare Jun 17 '13 at 18:39