Casella combinata di collegamento (preferibilmente JQuery)

Question

Mi chiedo se qualcuno ha esperienza nell'uso di un plugin JQuery che converte un codice HTML

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

casella combinata in qualcosa (probabilmente un div) in cui selezionare un elemento equivale a fare clic su un collegamento.

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

I vostri consigli, esperienze e raccomandazioni sono apprezzati.

Answer 1

La soluzione semplice è usare

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

Ciò crea un evento onchange nella casella di selezione che ti reindirizza all'URL memorizzato nel campo del valore dell'opzione selezionata.

Answer 2

Non sono sicuro di dove desideri collegarti quando fai clic sul Div, ma dato qualcosa del genere forse funzionerebbe:

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

e il seguente JQuery crea un elenco di <div> elementi, a va a un URL in base al 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();

Questo fa quello che vuoi?

Answer 3

Se avrai molte caselle di selezione che desideri consentire l'utilizzo come reindirizzamenti, senza doverle definire in modo indipendente, prova qualcosa di simile a:

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

E fai in modo che le tue caselle di selezione siano nominate di conseguenza:

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

Questo crea un evento onchange per tutti gli ID contenenti "COMMON_NAME" per eseguire un reindirizzamento del file <option> valore.

Answer 4

Questo pezzo di Javascript nella sezione 'seleziona':

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

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