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

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

开发者_JAVA百科How can I do this?

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>

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>

<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;
}

Following code will Validate

• Is URL is having respective parameter if not that add it.
• If parameter is found that replace the parameter with the new selected value.

• Reload the page.

  $(function () {
      $("#the_select").change(function () {
  
          if (window.location.href.indexOf("?") < 0) {
              window.location.href = window.location.href + "?mypage="+ this.value;
          }
          else{
              window.location.href = replaceUrlParam(window.location.href, "mypage", this.value)
          } 
  
      });
  });
  
  
  function replaceUrlParam(url, paramName, paramValue)
  {
      var pattern = new RegExp('\\b(' + paramName + '=).*?(&|$)')
      if (url.search(pattern) >= 0)
      {
          return url.replace(pattern, '$1' + paramValue + '$2');
      }
      return url + (url.indexOf('?') > 0 ? '&' : '?') + paramName + '=' + paramValue
  }
  

Better is to use <form> because, in another way, the all fields not append in url. In this cause @BJ Patel wanted resolve this problem in the another answer in here.
So, If you use form for this, anytime you will have another fields in form, after submit that all append and replace with new value, in URL. See:

<form method="get" action="http://www.example.com/mypage" id="form">
  <select id="the_select" name="id">
    <option value="123">Go to 123</option>
    <option value="456">Go to 456</option>
    <option value="789">Go to 789</option>
  <select>
</form>

<script type="text/javascript">
$(function(){
  $("#the_select").change(function(){
    $("#form").submit();
  });
});
</script>