jQ, On dropdownlist change/selection, get request on same url with ?somekey=selected-item-value

Question

When someone selects a drop down list item, I want to redirect to the same page but with the query string set with

www.example.com/?somekey=selected-value

where selected-value is the numeric value of the option.

I am using jQuery if that makes it easier.

score 1 · Accepted Answer · answered Jul 04 '10 at 02:23

1

Use the onchange event in the select element:

<select ... onchange="window.location.href='?somekey='+$(this).val();">

Or if you want to hook it up using jQuery:

$(function(){
  $('#idOfTheSelect').change(function(){
    window.location.href = '?somekey=' + $(this).val();
  });
});

answered Jul 04 '10 at 02:23

Guffa

687,336
108
737
1,005

I'd consider using window.location.replace(), for reasons detailed here http://stackoverflow.com/questions/503093/how-can-i-make-a-redirect-page-in-jquery – tomit Jul 04 '10 at 02:25
If the href already contains a querystring value, this will wipe it out right? hmm...maybe I can check on the server side first. – Blankman Jul 04 '10 at 02:32

score 0 · Answer 2 · answered Jul 04 '10 at 02:26

Absolutely. Heres some code:

<select id="redirect">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

$(document).ready(function() {
    $("#redirect").change(function() {
       document.location = "product.html?id=" + $(this).val();
    });
});

jQ, On dropdownlist change/selection, get request on same url with ?somekey=selected-item-value

2 Answers2