StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You could redirect your users with a <code>GET</code> parameter to be read on the next page load.</p> <p>This JavaScript function <a href="http://papermashup.com/read-url-get-variables-withjavascript/" rel="nofollow">(taken from here)</a> returns all the <code>GET</code> parameters : </p> <pre><code>function getUrlVars() { var vars = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars; } </code></pre> <p>So what you would want to do is this :</p> <pre><code>$('#my-select').bind('change', function () { var selectionValue = $(this).val(); if (selectionValue != ''){ var getParams = getUrlVars(); // Next line is deciding whether to use a '?' or a '&' // depending if there were already GET parameters in the URL var symbolToUse = (getParams? '&' : '?' ); // Remove previous instances of "selected" in the URL. var url = window.location.href.replace(/[&|?]selected=\d+/g,""); window.location.href = url + symbolToUse + "selected="+selectionValue; } )} </code></pre> <p>When the user makes a change to the select element, its value will be extracted and appended to the url.</p> <p><code>https://repro.com/index.php?page=category&s=something2?selected=4</code><br> <sub>Here we can see that the user has wisely chosen eggs.</sub></p> <p>Then you include the call to the <code>getURLVars()</code> function on your <code>document.ready</code> callback -</p> <pre><code>$(document).ready(function() { var getParams = getUrlVars(); if (getParams){ // Here we make the selection of the <select> by setting its value // to the same as that of the <option> that was chosen and // placed in the URL as a GET parameter. $('#my-select').val(getParams.selected); } ... )} </code></pre> <p>and now your select element will have the value that the user clicked on - provided that the <code>selected</code> parameter contains a valid value.</p> <p>This also requires that your <code><option></code> tags contain <code>value</code> attributes with only the "id" of the option; No need for the whole URL as we are using the existing one -</p> <pre><code><select id="my-select"> <option value="1">FOO</option> <option value="2">BAR</option> <option value="3">SPAM</option> <option value="4">EGGS</option> </select> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload