Javascript jquery 下拉列表，使用带有下拉值 ID 的 Get 请求更改重新加载页面

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

提问by Blankman

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:

当有人在下拉列表中选择一个项目时，我想使用查询字符串中所选项目中的 ID 值重新加载当前页面，例如：

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

How can I do this?

我怎样才能做到这一点？

回答by BBonifield

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

您可以使用 Dutchie432 指出的原始 javascript 版本或 jQuery 版本。

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

回答by Dutchie432

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

不需要 jQuery。在这种情况下，基本的 Javascript 会很好。

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

只需在下拉菜单中添加一个“onchange”事件

<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

OR 精简版，没有单独的 JS 代码

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

回答by Stephan Muller

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

回答by BJ Patel

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, '' + paramValue + '');
      }
      return url + (url.indexOf('?') > 0 ? '&' : '?') + paramName + '=' + paramValue
  }
  

• 如果没有添加它，URL 是否具有相应的参数。
• 如果找到参数，则用新的选定值替换该参数。

• 重新加载页面。

  $(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, '' + paramValue + '');
      }
      return url + (url.indexOf('?') > 0 ? '&' : '?') + paramName + '=' + paramValue
  }
  

回答by Nabi K.A.Z.

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

更好的是使用，<form>因为在另一种方式中，所有字段都没有附加到 url 中。在这个原因中@BJ Patel想要在此处的另一个答案中解决这个问题。
所以，如果你使用form这个，任何时候你都会在表单中有另一个字段，在提交所有附加和替换新值后，在 URL 中。看：

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