Développer le menu déroulant de sélection

J’essaie d’élargir un menu déroulant de sélection en cliquant sur un lien.

  item 1 item 2 item 3 item 4

Et le Javescript est comme suit.

 $(document).ready(function() { $("#btn").click(function() { $("#sel").sortinggger('click'); }); });

Des idées…??

Vous ne pouvez pas imiter un événement de navigateur natif à l’aide de .sortinggger . En regardant ce lien vers le tutoriel jQuery, il semble que vous ayez besoin de la méthode .simulate de jquery.simulate.js . De plus l’événement ouvert de la liste déroulante est donné par mousedown not click .

Mise à jour: le code devient alors:

 $(document).ready(function() { $("#btn").click(function() { $("#sel").simulate('mousedown'); }); });

 //https://stackoverflow.com/a/10844589/7926961 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(); }

DEMO:

http://jsfiddle.net/XE73h/444/

Je pense trouver pour résoudre ce problème, j’ai testé dans, par exemple, FF, chrome et Edge.

HTML

JQUERY

 $('#MyButton').on("click",function(){ $("#selecttest").attr("size", 8); $("#selecttest").css("position","fixed"); $('#MyButton').css("margin-left", $("#selecttest").width() + 5);}); $('#selecttest').on("change",function(){ $("#selecttest").attr("size", 1);});

jsfiddle tester cette

essaye ça

 $(document).ready(function() { $("#btn").click(function() { document.getElementById('sel').size='2' }); });