jquery dropdownlist，onchange刷新页面使用获取请求的ID为下拉值

Question

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

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

我该怎么做？

Answer 1

jQuery不是必需的。在这种情况下，基本的JavaScript将会很好。

只需添加一个“的onchange”事件到你的下拉

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

然后，添加函数被调用时的值更改

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

或精简版本，没有独立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> 

Answer 2

您可以使用ra 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> 

Answer 3

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

脚本：

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

Answer 4

下面的代码将验证

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

Answer 5

更好的是使用<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>