javascript - ejemplos - Vincular el cuadro combinado(JQuery preferiblemente)

menu responsive drop down

Question

Me pregunto si alguien tiene experiencia en el uso de un plugin JQuery que convierta un html

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

cuadro combinado en algo (probablemente un div) donde seleccionar un elemento actúa igual que hacer 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 ''cambiar'' el valor del cuadro combinado, pero esto parece más un hack.

Su consejo, experiencia y recomendaciones son apreciados.

Answer 1

Este bit de javascript en ''seleccionar'':

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

No es ideal (porque las presentaciones de formularios en ASP.NET MVC que estoy usando no parecen usar el motor de enrutamiento para URL) pero cumple su función.

Answer 2

La solución simple es usar

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

Esto crea un evento onchange en el cuadro de selección que lo redirecciona a la url almacenada en el campo de valor de la opción seleccionada.

Answer 3

No estoy seguro de a dónde quiere vincular cuando hace clic en Div, pero dado algo como esto, quizás funcione:

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

y el 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 quieres?

Answer 4

Si va a tener una gran cantidad de cuadros de selección que desea permitir el uso como redireccionamientos, sin tener que definirlos de forma independiente, intente algo similar a:

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

Y haga que sus cuadros de selección sean nombrados en consecuencia:

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

Esto crea un evento onchange para todos los ID que contienen "COMMON_NAME" para hacer un redireccionamiento del valor de <option> .