Vinculando caixa de combinação (JQuery de preferência)

Question

Gostaria de saber se alguém tem alguma experiência usando um plugin JQuery que converte um html

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

caixa de combinação em algo (provavelmente uma div) onde selecionar um item funciona da mesma forma que clicar em um link.

Eu acho que você provavelmente poderia usar javascript para lidar com um evento de seleção (meu conhecimento de javascript está um pouco em mau estado no momento) e 'ligar' o valor da caixa de combinação, mas isso parece mais um hack.

Seus conselhos, experiência e recomendações são apreciados.

Answer 1

A solução simples é usar

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

Isso cria um evento onchange na caixa de seleção que redireciona você para a URL armazenada no campo de valor da opção selecionada.

Answer 2

Não tenho certeza de onde você deseja vincular ao clicar no Div, mas algo assim talvez funcione:

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

e o seguinte JQuery cria uma lista de <div> elementos, a vai para uma URL com base no valor da opção:

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

Isso faz o que você quer?

Answer 3

Se você tiver muitas caixas de seleção que deseja permitir o uso como redirecionamentos, sem precisar defini-las independentemente, tente algo semelhante a:

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

E faça com que suas caixas de seleção sejam nomeadas de acordo:

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

Isso cria um evento onchange para todos os IDs contendo "COMMON_NAME" para fazer um redirecionamento do <option> valor.

Answer 4

Esse pedaço de javascript no 'select':

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

Não é o ideal (porque os envios de formulários no ASP.NET MVC que estou usando não parecem usar o mecanismo de roteamento para URLs), mas faz seu trabalho.