web-dev-qa-db-fra.com

jQuery ouvert sélection par bouton

Comment ouvrir le menu déroulant de sélection par bouton?

$('button').on('click', function() {
   $('select').trigger('click');
});

Mon code: http://jsfiddle.net/UGkWp/

METTRE À JOUR:
J'ai trouvé des solutions pour les navigateurs Webkit, mais uniquement pour les navigateurs suivants: http://jsfiddle.net/UGkWp/2/ Peut-être que vous savez comment cela se passe dans chaque navigateur?

jqueryselecttriggersclick
8
kicaj

Vous pouvez le faire avec seulement CSS comme ceci:

<html>
<body>

<div class="sorting">
<div class="sort right"><label>
<span>Items per page</span>
    <select>
    <option value="">Items per page</option>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="40">40</option>
    <option value="60">60</option>
    <option value="100">100</option>
    <option value="200">200</option>
    </select>

    <span class="pointer"><i class="fa fa-caret-down"></i></span>
    </label>
    </div>
    </div>


</body>
</html>
<style>
select{
  -webkit-appearance:none;
    appearance:none;
      -moz-appearance:none;
}
.sorting{
    padding:5px 10px;
    border:1px solid #eee;
    clear:both;
  background:#FFF;
  height:40px;
}
.sorting h4{
    padding:4px 0 0;
    margin:0;
}
.sort{
    position:relative;  
    padding-left:10px;
  float:left;
}
.sort>label{
    font-weight:normal !important
}
.sort span.pointer{
    height:30px;
    width:30px;
    border-left:1px solid #ddd;
    position:absolute;
    right:0;
    top:0;
    text-align:center;
    color:#c49633;
    font-size:20px;
    z-index:1;
}
.sort span.pointer i{
    margin-top:6px;
}
.sorting select{
    padding:5px 40px 5px 10px !important;
    margin-left:10px;
    border:1px solid #eee;
    background:none;
    height:30px;
    position:relative;
    z-index:2;
}
</style>

Visitez ce violon pour plus de détails: https://jsfiddle.net/ssjuma/1mkxw2nb/1/

7
Said Suleiman Juma
(function($) {
    "use strict";
    $.fn.openSelect = function()
    {
        return this.each(function(idx,domEl) {
            if (document.createEvent) {
                var event = document.createEvent("MouseEvents");
                event.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                domEl.dispatchEvent(event);
            } else if (element.fireEvent) {
                domEl.fireEvent("onmousedown");
            }
        });
    }
}(jQuery));
$('#country').openSelect();

http://jsfiddle.net/yqs90jdw/

7
laurent belloeil

Je pense que vous devriez regarder cette page:

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

Il semble que ce ne soit pas possible de le faire directement, mais des outils existent pour imiter ce que vous essayez de faire.

Une solution simple consisterait à utiliser le plugin "choisi" pour jquery: http://harvesthq.github.io/chosen/

Cela vous donne également de grands avantages par rapport à la sélection normale et à sa facilité d'utilisation.

Sur ceci, vous pouvez simplement déclencher un événement "mousedown" comme suit:

$('#dropdown_id_chzn').trigger('mousedown')

Étant donné que vous avez choisi (et jquery) activé sur votre page, le code suivant devrait faire l'affaire:

HTML:

<select name="foo">
  <option value="1">Bar</option>
</select>

JavaScript:

$('select[name="foo"]').chosen();
$('#foo_chzn').trigger('mousedown');

Notez que choisi ajoute automatiquement le "_chzn" à votre nom de liste déroulante, ce que vous devez utiliser dans votre sélecteur.

1
user2849406

Cela a fonctionné pour moi

$ ('select'). focus ();

0
edo4hy