Cargar página en la selección del formulario desplegable

Question

Estoy tratando de crear un menú desplegable que me lleve a varias páginas web. Ahora mismo está configurado para que haga su selección y luego presione el botón "Ir" y luego lo llevará al enlace apropiado. Estoy tratando de encontrar la forma de hacerlo, así que cuando haces tu selección va automáticamente y no necesitas presionar el botón "Ir".

Aquí es lo que tengo:

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

Cualquier ayuda o enlaces a explicaciones serían grandes. ¡Gracias!

Answer 1

Pruebe lo siguiente:

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

Lo que estábamos buscando era 'onchange' en lugar de 'onsumbit'

Answer 2

Salida 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

Algo como esto podría ayudar - básicamente simplemente vincula un evento onChange a la selección para que cuando se seleccione una nueva opción reenvíe la ubicación a la página.

<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

Yo recomendaría que empezar a usar el marco Javascript jQuery, ya que realmente le hará la vida mucho más fácil cuando se trata de Javascript.

Cuando se tiene jQuery instalado y configurado en que la página web que debe ser capaz de hacer algo como esto:

<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

Obviamente super tarde a la fiesta aquí, pero como yo estaba tratando de averiguar la misma cosa y pude, voy a publicar cómo aquí.

Las otras respuestas te hacen cargar el enlace cuando cambias la opción de seleccionar elemento, pero originalmente pediste que lo hicieras con un botón, después de hacer tu selección. Esto funcionó para mí:

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