Vinculación de cuadro combinado (jQuery preferiblemente)

Question

Me pregunto si alguien tiene alguna experiencia en el uso de un plugin jQuery que convierte un html

<select> 
    <option> Blah </option> 
</select> 

cuadro combinado en algo (probablemente un div), donde la selección de un elemento actúa igual que haciendo clic en un enlace.

Supongo que probablemente puedas usar javascript para manejar un evento de selección (mi conocimiento de javascript está un poco en mal estado en este momento) y 'activar' el valor del cuadro combinado, pero esto parece más un hack.

Sus consejos, experiencia y recomendaciones son apreciadas.

Answer 1

La solución más sencilla es utilizar

$("#mySelect").change(function() { 
    document.location = this.value; 
}); 

Esto crea un evento onchange en el cuadro de selección que le redirige a la URL almacenada en el campo de valor de la opción seleccionada.

Answer 2

Este poco de javascript en el 'select':

onchange="if(this.options[this.selectedIndex].value!=''){this.form.submit()}" 

No es lo ideal (porque envíos de formularios en ASP.NET MVC, que estoy usando no parece que utilizan el motor de enrutamiento de direcciones URL) pero hace su trabajo.

Answer 3

no estoy seguro de dónde se desea establecer el vínculo cuando se hace clic en el Div, pero teniendo en cuenta tal vez algo como esto funcionaría:

<select id="mySelect"> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</options> 
</select> 
<div id="myDiv"/> 

y la siguiente jQuery crea una lista de elementos <div>, una va a una URL basada en el valor de la opción:

$("#mySelect option").each(function() { 
    $("<div>" + $(this).text() + "</div>").appendTo($("#myDiv")).bind("click", $(this).val(), function(event) { 
     location.href = "goto.php?id=" + event.data; 
    }); 
}); 
$("#mySelect").remove(); 

¿Hace esto lo que quiere?

Answer 4

Si usted va a tener una gran cantidad de cuadros de selección que desea permitir utilizar como redirecciones, sin tener que definir de forma independiente, trata de algo similar a:

$("[id*='COMMON_NAME']").change(function() { 
    document.location = this.value; 
}); 

Y tener sus cuadros de selección ser nombradas en consecuencia:

<select id="COMMON_NAME_001">...</select> 
<select id="COMMON_NAME_002">...</select> 

Esto crea un evento onchange para todos los identificadores que contengan "COMMON_NAME" hacer un redireccionamiento del valor <option>.