jquery dropdownlist, onchange reload page using Get request with ID of dropdown value

Question

When someone selects an item in a dropdown, I want to reload the current page with the value of the ID in the selected item in the querystring like:

http://www.example.com/mypage?id=234

How can I do this?

Answer 1

jQuery is not needed. basic Javascript will do you just fine in this case.

Just add an "onchange" event to your drop-down

<select onchange="doAction(this.value);">
  <option value="123">Go to 123</option>
  <option value="456">Go to 456</option>
<select>

then, add the function that gets called when the value changes

<script type="text/javascript"><!--
    function doAction(val){
        //Forward browser to new url
        window.location='http://www.domain.com/mypage?id=' + val;
    }
--></script>

OR The compact version, without seperate JS Code

<select onchange="window.location='http://www.domain.com/mypage?id=' + this.value;">
  <option value="123">Go to 123</option>
  <option value="456">Go to 456</option>
<select>

Answer 2

You can use the raw javascript version that Dutchie432 noted or the jQuery version.

<select id="the_select">
  <option value="123">Go to 123</option>
  <option value="456">Go to 456</option>
<select>

<script type="text/javascript">
$(function(){
  $("#the_select").change(function(){
    window.location='http://www.domain.com/mypage?id=' + this.value
  });
});
</script>

Answer 3

<select id="items" onselect="javascript:reloadPage(this)">
  <option name="item1">Item 1</option>
</select>

script:

function reloadPage(id) {
   document.location.href = location.href + '?id=' + id.value;
}