Carica la pagina sulla selezione dal modulo a discesa

Question

Sto cercando di creare un menu a discesa che mi porti su varie pagine web. In questo momento è impostato in modo da effettuare la selezione e quindi si preme un pulsante "Vai" e poi ti porta al link appropriato. Sto cercando di capire come farlo in modo che quando si effettua la selezione vada automaticamente e non sia necessario premere il pulsante "Vai".

Ecco quello che ho:

<p align="center"> 
<form name="jump" class="center"> 
<select name="menu"> 
<option value="#">Select an option</option> 
<option value="/link1.shtml">Link 1</option> 
<option value="/link2.shtml">Link 2</option> 
<option value="/link3.shtml">Link 3</option> 
</select> 
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO"> 
</form> 
</p> 

Qualsiasi aiuto o link a spiegazioni sarebbe grande. Grazie!

Answer 1

Provare quanto segue:

<select onchange="location = this.options[this.selectedIndex].value;"> 
    <option>Please select</option> 
    <option value="http://www.apple.com/">Apple</option> 
    <option value="http://www.bbc.com">BBC</option> 
    <option value="http://www.facebook.com">Facebook</option> 
</select>​ 

Cosa stavate cercando era 'onchange' invece di 'onsumbit'

Answer 2

Partenza jQuery .change()

<script> 
    $('select.menu').change(function(e){ 
     // this function runs when a user selects an option from a <select> element 
     window.location.href = $("select.menu option:selected").attr('value'); 
    }); 
</script> 

Answer 3

Qualcosa di simile potrebbe aiutare - in fondo basta associare un evento onChange alla selezione in modo che, quando viene selezionata una nuova opzione, la pagina venga inoltrata alla pagina.

<p align="center"> 
<form name="jump" class="center"> 
<select name="menu" onchange="gotoPage(this)"> 
<option value="#">Select an option</option> 
<option value="/link1.shtml">Link 1</option> 
<option value="/link2.shtml">Link 2</option> 
<option value="/link3.shtml">Link 3</option> 
</select> 
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO"> 
</form> 
</p> 

<script type="text/javascript"> 
function gotoPage(select){ 
    window.location = select.value; 
} 
</script> 

Answer 4

mi consiglia di iniziare a utilizzare il framework javascript jQuery come realmente renderà la vostra vita molto più facile quando si tratta di javascript.

Quando si dispone di jQuery installato e configurato in voi pagina web si dovrebbe essere in grado di fare qualcosa del genere:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#selection").change(function() { 
      location = $("#selection option:selected").val(); 
     }); 
    }); 
</script> 

<p align="center"> 
    <form name="jump" class="center"> 
     <select name="menu" id="selection> 
      <option value="#">Select an option</option> 
      <option value="/link1.shtml">Link 1</option> 
      <option value="/link2.shtml">Link 2</option> 
      <option value="/link3.shtml">Link 3</option> 
     </select> 
    </form> 
</p> 

Answer 5

Ovviamente super tardi alla festa qui, ma dato che stavo cercando di capire lo stesso cosa e fu in grado di, posterò come qui.

Le altre risposte hanno caricato il collegamento quando si modifica l'opzione di selezione dell'elemento, ma in origine si era chiesto di farlo con un pulsante, dopo aver effettuato la selezione. Questo ha funzionato per me:

<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     var newUrl = ""; 
 
     $("#picksite").change(function() { 
 
      $newUrl = $("#picksite option:selected").val(); 
 
     }); 
 
     $("#executelink").click(function() { 
 
      location = $newUrl ; 
 
     }); 
 
    }); 
 
</script> 
 

 
<select id="picksite"> 
 
    <option value="">Pick A Website</option> 
 
    <option value="http://google.com">Google</option> 
 
    <option value="http://facebook.com">Facebook</option> 
 
    <option value="http://twitter.com">Twitter</option> 
 
    <option value="http://gmail.com">Gmail</option> 
 
</select> 
 

 
<button id="executelink">Go To Site</button>