用jQuery模拟点击select元素

我用这个代码模拟click select元素：

 $(function(){ $("#click").click(function(){ $("#ts").click(); //$("#ts").trigger("click"); }); }); 

和HTML代码是：

 <select id="ts"> <option value="1">1</option> <option value="2">Lorem ipsum dolor s.</option> <option value="3">3</option> </select> <input type="button" id="click" value="Click"/> 

我testingclick和trigger但都不工作。

感谢您的帮助。

Answer 1

这是我认为你可以得到的最好的跨浏览器方法。 经过Safari，Firefox，Chrome和IEtesting。 对于Chrome，奥斯卡·贾拉的答案是要走的路。 （更新date：10-13-2016）

 $(function() { $("#click").on('click', function() { var $target = $("#ts"); var $clone = $target.clone().removeAttr('id'); $clone.val($target.val()).css({ overflow: "auto", position: 'absolute', 'z-index': 999, left: $target.offset().left, top: $target.offset().top + $target.outerHeight(), width: $target.outerWidth() }).attr('size', $clone.find('option').length > 10 ? 10 : $clone.find('option').length).change(function() { $target.val($clone.val()); }).on('click blur keypress',function(e) { if(e.type !== "keypress" || e.which === 13) $(this).remove(); }); $('body').append($clone); $clone.focus(); }); }); 

看到jsFiddle演示

Answer 2

这是尽可能接近我想：

 $(function(){ $("#click").on('click', function(){ var s = $("#ts").attr('size')==1?5:1 $("#ts").attr('size', s); }); $("#ts option").on({ click: function() { $("#ts").attr('size', 1); }, mouseenter: function() { $(this).css({background: '#498BFC', color: '#fff'}); }, mouseleave: function() { $(this).css({background: '#fff', color: '#000'}); } }); }); 

小提琴

Answer 3

我结束了在选项本身设置选定的属性。 然后在select元素上触发更改。

Answer 4

我有一个复杂的select元素，由上一个select元素给出的答案提供。 选项由AJAX提供，由onchange事件触发。

为了满足我的需求，我们使用下面的“我的魔法事件”中的jQuery代码来预先填充模拟用户行为的“隐藏的魔法事件”（以一种深入的testing方式）。 它通过索引select选项：

 // Quick feed of my Car Form document.getElementById('carbrand').selectedIndex = 30; // "PORSCHE" document.getElementById('carbrand').onchange(); var timeoutID = window.setTimeout(function () { document.getElementById('model').selectedIndex = 1; // "911" document.getElementById('model').onchange(); var timeoutID = window.setTimeout(function () { document.getElementById('energy').selectedIndex = 1; // "SUPER" document.getElementById('energy').onchange(); } , 200); } , 200); 

Merciàhttps://stackoverflow.com/users/1324/paul-roub倒更正;;-)

Answer 5

奥斯卡哈拉变种小更新（与toggle ）
http://jsfiddle.net/mike_s/y5GhB/