Ir a diferentes URL al hacer clic en el botón

Question

Necesito crear un código html, en el que si el usuario selecciona un elemento de la lista desplegable y hace clic en el botón irá al enlace respectivo.

<select name="myList"> 
<option value="Google" />Google 
<option value="yahoo" />yahoo 
<option value="Ask" />Ask 
</select> 

si el usuario selecciona Google de la lista desplegable y el botón hace clic, a continuación, la página debe ser redirigido a www.google.com y si se selecciona y hace clic en el botón yahoo debe ir a www.yahoo.com

Me gustaría mencionar que necesito el botón en este escenario. No quiero ir al sitio respectivo en la lista desplegable. Solo después de hacer clic en el botón.

Gracias de antemano.

Answer 1

HTML:

<select name="myList" id="ddlMyList"> 
    <option value="http://www.google.com">Google</option> 
    <option value="http://www.yahoo.com">Yahoo</option> 
    <option value="http://www.ask.com">Ask</option> 
</select> 

<input type="button" value="Go To Site!" onclick="NavigateToSite()" /> 

JavaScript:

function NavigateToSite(){ 
    var ddl = document.getElementById("ddlMyList"); 
    var selectedVal = ddl.options[ddl.selectedIndex].value; 

    window.location = selectedVal; 
} 

También puede abrir el sitio en una nueva ventana al hacer esto:

function NavigateToSite(){ 
    var ddl = document.getElementById("ddlMyList"); 
    var selectedVal = ddl.options[ddl.selectedIndex].value; 

    window.open(selectedVal) 
} 

Como nota al margen , sus etiquetas de opción no están formateadas correctamente. Nunca debe usar el atajo < ... /> cuando una etiqueta contiene contenido.

Answer 2

En primer lugar, cambiar los valores de las opciones a la URL que desea orientar:

<option value="http://www.google.com">Google</option> 
<option value="http://www.yahoo.com">Yahoo</option> 
<option value="http://www.ask.com">Ask</option> 

A continuación, añadir una identificación para el selecto para que pueda dirigirlo:

<select name="myList" id="myList"> 

Por último, añadir una onclick método para el control de selección para controlar la redirección:

<input type="button" onclick="document.location.href=document.getElementById('myList').value"> 

Answer 3

Uso de JavaScript, puede añadir otra onclick evento al botón. En el controlador de eventos, puede usar una declaración if para verificar qué valor fue seleccionado en la lista select, y usar window.location para redirigir al usuario a la URL apropiada.

Sugeriría cambiar el value de los elementos option para que sea la URL requerida, y luego simplemente puede tomar el valor y acceder a esa URL, en lugar de tener que verificar qué opción fue seleccionada.

Answer 4

<select name="myList"> 
    <option value="http://www.google.com">Google</option> 
    <option value="http://www.yahoo.com">Yahoo</option> 
    <option value="http://www.ask.com">Ask</option> 
</select> 

<input type="button" onclick="window.location=document.myList.value" /> 

Answer 5

onclick()="window.location.href='page.html'"