Verknüpfung Kombinationsfeld (JQuery vorzugsweise)

Question

Ich frage mich, ob jemand Erfahrung mit einem JQuery-Plugin hat, das eine HTML

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

Kombinationsfeld in etwas umwandelt (wahrscheinlich ein div), in dem ein Element der Auswahl der gleichen fungiert als Klicken Sie auf einen Link.

Ich denke, Sie könnten wahrscheinlich Javascript verwenden, um ein Auswahlereignis zu behandeln (mein JavaScript-Wissen ist im Moment etwas baufällig) und "switch" auf den Wert der Kombinationsfeld, aber das scheint eher ein Hack.

Ihr Rat, Erfahrung und Empfehlungen sind willkommen.

Answer 1

Die einfache Lösung ist

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

Dies schafft ein onchange Ereignis auf der Select-Box zu verwenden, die Sie auf die URL in dem Wertefeld der gewählten Option gespeichert umleitet.

Answer 2

Dieses Bit von JavaScript in der 'wählen':

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

Es ist nicht ideal ist (weil das Ausfüllen von Formularen in ASP.NET MVC, die ich die Routing-Engine für URLs zu verwenden, werden nicht angezeigt, bin mit) aber es macht seine Arbeit.

Answer 3

Ich bin nicht sicher, wo Sie verknüpfen möchten, wenn Sie die Div klicken, aber so etwas wie dieses gegeben vielleicht funktionieren würde:

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

und die folgende JQuery erstellt eine Liste der <div> Elemente, eine geht zu einer URL basierend auf dem Wert der Option:

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

Macht dies, was Sie wollen?

Answer 4

Wenn Sie eine Menge von Auswahlboxen haben werden, die Sie als Umleitungen verwenden zulassen wollen, ohne dass sie unabhängig voneinander zu definieren zu haben, versuchen Sie etwas ähnliches wie:

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

Und haben Ihre Auswahlboxen werden entsprechend benannt:

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

Dies schafft ein onchange Ereignis für alle IDs „COMMON_NAME“ enthält eine Umleitung des <option> Wert zu tun.