Collegamento casella combinata (JQuery preferibilmente)

Question

Mi chiedo se qualcuno ha qualche esperienza con un plugin jQuery che converte un html

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

casella combinata in qualcosa (probabilmente un div) in cui la selezione di un oggetto si comporta lo stesso facendo clic su un link.

Immagino che potresti probabilmente usare javascript per gestire un evento di selezione (la mia conoscenza di javascript è un po 'in disfacimento al momento) e "passare" al valore della casella combinata ma questo sembra più un trucco.

Il vostro consiglio, esperienza e raccomandazioni sono apprezzati.

Answer 1

La soluzione più semplice è quello di utilizzare

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

Questo crea un evento onchange sulla casella di selezione che si reindirizza all'URL memorizzato nel campo valore dell'opzione selezionata.

Answer 2

Questo po 'di javascript nel 'selezionare':

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

Non è l'ideale (perché l'invio di moduli in ASP.NET MVC che sto usando non sembrano utilizzare il motore di routing per gli URL) ma fa il suo lavoro.

Answer 3

io non sono sicuro di dove si desidera collegare a quando si fa clic sul Div, ma dato qualcosa di simile, forse avrebbe funzionato:

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

e la seguente JQuery crea un elenco di elementi <div>, una va a un URL basato sul valore dell'opzione:

$("#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(); 

Fa ciò che vuoi?

Answer 4

Se avete intenzione di avere un sacco di selezionare le caselle che si desidera consentire di utilizzare come redirect, senza dover definire in modo indipendente, provare qualcosa di simile a:

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

e la tua caselle di selezione essere nominato di conseguenza:

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

Questo crea un evento onchange per tutti gli ID che contengono "COMMON_NAME" per fare un redirect del valore <option>.