Puis-je ouvrir une liste déroulante à l'aide de jQuery ?

Question

Pour cette liste déroulante en HTML :

<select id="countries">
<option value="1">Country</option>
</select>

Je voudrais ouvrir la liste (ce qui revient à faire un clic gauche dessus). Est-ce possible en utilisant JavaScript (ou plus précisément jQuery) ?

Answer 1

J'ai essayé de trouver la même chose et j'ai été déçu. J'ai fini par modifier la taille de l'attribut de la boîte de sélection pour qu'elle semble s'ouvrir.

$('#countries').attr('size',6);

et quand tu auras fini

$('#countries').attr('size',1);

Answer 2

Vous pouvez facilement simuler un clic sur un élément mais un clic sur un <select> n'ouvrira pas le menu déroulant.

L'utilisation de sélections multiples peut être problématique. Vous devriez peut-être envisager d'utiliser des boutons radio à l'intérieur d'un élément conteneur que vous pouvez développer et contracter selon vos besoins.

Answer 3

J'ai rencontré le même problème et j'ai une solution. Une fonction appelée ExpandSelect() qui émule le clic de la souris sur l'élément "select", en créant un autre élément "select". <select> qui est absolument posionné et avoir plusieurs options visibles à la fois en définissant l'élément size attribut. Testé dans tous les principaux navigateurs : Chrome, Opera, Firefox, Internet Explorer. Explication de son fonctionnement, ainsi que le code ici :

Editer (le lien était cassé) .

J'ai créé un projet sur Google Code, allez chercher le code là-bas :

http://code.google.com/p/expandselect/

Captures d'écran

Il y a une petite différence dans l'interface graphique lors de l'émulation du clic, mais cela n'a pas vraiment d'importance, voyez par vous-même :

Lors d'un clic de souris :

_{(source : <a href="http://expandselect.googlecode.com/hg/mouseclick_manyoptions.jpg" rel="noreferrer">googlecode.com </a>)}

En émulant le clic :

_{(source : <a href="http://expandselect.googlecode.com/hg/emulateclick_manyoptions.jpg" rel="noreferrer">googlecode.com </a>)}

Plus de captures d'écran sur le site web du projet, lien ci-dessus.

Answer 4

Il s'agit d'une version améliorée des réponses ci-dessus, qui utilise la longueur/le nombre d'options pour se conformer au nombre réel d'options.

J'espère que cela aidera quelqu'un à obtenir les résultats dont il a besoin !

    function openDropdown(elementId) {
        function down() {
            var pos = $(this).offset(); // remember position
            var len = $(this).find("option").length;
                if(len > 20) {
                    len = 20;
                }

            $(this).css("position", "absolute");
            $(this).css("zIndex", 9999);
            $(this).offset(pos);   // reset position
            $(this).attr("size", len); // open dropdown
            $(this).unbind("focus", down);
            $(this).focus();
        }
        function up() {
            $(this).css("position", "static");
            $(this).attr("size", "1");  // close dropdown
            $(this).unbind("change", up);
            $(this).focus();
        }
        $("#" + elementId).focus(down).blur(up).focus();
    }

Answer 5

Un moyen simple et facile.

function down(what) {
  pos = $(what).offset();  // remember position
  $(what).css("position","absolute");
  $(what).offset(pos);   // reset position
  $(what).attr("size","10"); // open dropdown
}

function up(what) {
$(what).css("position","static");
$(what).attr("size","1");  // close dropdown
}

Maintenant vous pouvez appeler votre DropDown comme ceci

<select onfocus="down(this)" onblur="up(this)">

Cela fonctionne parfaitement pour moi.

Peut-être mieux, car vous n'avez pas de problèmes avec la position des autres éléments sur la page.

function down(was) {
a = $(was).clone().attr('id','down_man').attr('disabled',true).insertAfter(was);
$(was).css("position","absolute").attr("size","10");
}

function up(was) {
$('#down_man').remove();
$(was).css("position","static");
$(was).attr("size","1");
}

Changez l'ID en une valeur fixe, ce n'est peut-être pas très intelligent mais j'espère que vous voyez l'idée.