jquery lista desplegable, página de recarga onchange utilizando Obtener solicitud con ID de valor desplegable

Question

Cuando alguien selecciona un elemento en un menú desplegable, quiero volver a cargar la página actual con el valor de la ID en el elemento seleccionado en la cadena de consulta como:

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

¿Cómo puedo hacer esto?

Answer 1

jQuery no es necesario. Javascript básico te hará bien en este caso.

Sólo añadir un evento "onchange" a su desplegable

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

a continuación, agregue la función que se llama cuando el valor cambia

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

o la versión compacta, sin separada Código 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

Puede usar la ra w versión javascript que observó Dutchie432 o la versión 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> 

guión:

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

Answer 4

siguiente código validará

• es la URL es tener parámetro respectivo si no que añadirlo.
• Si se encuentra un parámetro que reemplace el parámetro con el nuevo valor seleccionado .

• Recargue la página.

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

mejor es utilizar <form> porque, de otra manera, los campos no todos anexan en url. En esta causa, @BJ Patel quería resolver este problema en la otra respuesta aquí.
Por lo tanto, si usa form para esto, en cualquier momento tendrá otros campos en la forma, después de enviarlos todos anexar y reemplazar con un nuevo valor, en la URL. Ver:

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