jquery dropdownlist, onchange ricarica pagina utilizzando Richiedi richiesta con ID del valore a discesa

Question

Quando qualcuno seleziona un elemento in un menu a discesa, voglio ricaricare la pagina corrente con il valore dell'ID nell'elemento selezionato nella sequenza querystring come:

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

Come posso fare questo?

Answer 1

jQuery non necessario. Javascript di base ti starà bene in questo caso.

basta aggiungere un evento "onchange" al tuo discesa

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

poi, aggiungere la funzione che viene chiamata quando il valore 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 versione compatta, senza separato 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

È possibile utilizzare il ra w versione javascript che Dutchie432 ha notato o la versione 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> 

script:

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

Answer 4

Seguendo codice convaliderà

• È URL sta avendo relativo parametro, se non che aggiungerlo.
• Se viene trovato un parametro che sostituisce il parametro con il nuovo valore selezionato .

• Ricarica la pagina.

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

migliore è usare <form> perché, in un altro modo, i tutti i campi non aggiungono in url. In questa causa, @BJ Patel voleva risolvere questo problema nell'altra risposta qui.
Quindi, se si utilizza form per questo, in qualsiasi momento si avranno altri campi nel modulo, dopo l'invio che tutti aggiungono e sostituiscono con un nuovo valore, nell'URL. Vedi:

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