Combo box de liaison (JQuery de préférence)

Question

Je me demande si quelqu'un a une expérience dans l'utilisation d'un plugin JQuery qui convertit un fichier HTML

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

zone de liste déroulante en quelque chose (probablement un div) où la sélection d'un élément revient à cliquer sur un lien.

Je suppose que vous pourriez probablement utiliser javascript pour gérer un événement de sélection (mes connaissances en javascript sont un peu en mauvais état pour le moment) et « activer » la valeur de la zone de liste déroulante, mais cela ressemble davantage à un hack.

Vos conseils, expériences et recommandations sont appréciés.

Answer 1

La solution simple consiste à utiliser

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

Cela crée un événement onchange sur la zone de sélection qui vous redirige vers l'URL stockée dans le champ de valeur de l'option sélectionnée.

Answer 2

Je ne sais pas où vous souhaitez créer un lien lorsque vous cliquez sur le Div, mais étant donné que quelque chose comme ceci fonctionnerait peut-être :

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

et le JQuery suivant crée une liste de <div> éléments, a va vers une URL en fonction de la valeur de l'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();

Est-ce que cela fait ce que tu veux ?

Answer 3

Si vous souhaitez autoriser l'utilisation de nombreuses zones de sélection comme redirections, sans avoir à les définir indépendamment, essayez quelque chose de similaire à :

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

Et faites en sorte que vos cases de sélection soient nommées en conséquence :

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

Cela crée un événement onchange pour tous les ID contenant "COMMON_NAME" afin d'effectuer une redirection du <option> valeur.

Answer 4

Ce peu de javascript dans le 'select' :

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

Ce n'est pas idéal (car les soumissions de formulaires dans ASP.NET MVC que j'utilise ne semblent pas utiliser le moteur de routage pour les URL) mais cela fait son travail.