Menu déroulant JS avec le bouton Soumettre

Question

alt text http://img84.imageshack.us/img84/2193/picture2kx.png

Je dois implémenter un menu déroulant comme celui de l'image. Je sais comment accomplir quelque chose comme ça quand il n'y a pas de bouton 'go' mais comment le ferais-je avec le bouton 'go'? Est-il possible de permettre à l'utilisateur de sélectionner un lien sans le déclencher à moins que l'utilisateur clique sur le bouton OK? Y at-il un plugin jquery ou quelque chose pour ce genre de comportement?

Je ne suis pas très bon avec JS, donc des extraits d'échantillons pour illustrer vos suggestions iront un long chemin pour m'aider à comprendre - merci!

Answer 1

Vous pouvez empêcher le comportement par défaut des liens, comme celui-ci:

$(document).ready(function() { 

    $("#menu a").click(function(event) { 
    event.preventDefault(); 
    }); 

}); 

Ainsi, l'utilisateur ne sera pas redirigé au moment de choisir le lien, mais ne cassera pas que le comportement dans le cas où il veut ouvrir dans un nouvel onglet/fenêtre, ce qui est cool.

Et pour rediriger l'utilisateur lorsqu'il clique, vous pouvez simplement attacher un événement au bouton GO qui trouve le a sélectionné, prend son href, et définit l'emplacement actuel à sa valeur.

Answer 2

Vous pouvez faire quelque chose comme ceci:

$("#menu a").click(function(event) { 
    $("#menu a").removeClass('selected'); 
    $(this).addClass('selected'); 
    return false; 
}); 

Puis:

$("#buttonid").click(function(event) { 
    window.location.href = $("#menu a.selected").attr('href'); 
});