logo标签列表

使用jQuery模拟在选择元素上的点击

jquery
23

我用这段代码来模拟对 select 元素的 click 操作：

$(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"/>

我测试了click和trigger，但都没有起作用。

感谢任何帮助。

你想要发生什么？ - Elen
点击事件不会触发SELECT打开，如果您希望实现这一功能。 - Diodeus - James MacFarlane
1
如上所述 - 它不会打开选择.... 你可以模拟在 select 上敲击 Enter - Elen
1
https://dev59.com/9HRC5IYBdhLWcg3wP-n5 - pmandell
在选择框中按下回车键不会打开它，我刚刚试过了FIDDLE。 - adeneo
显示剩余2条评论
6个回答
35
以前没见过这个，对我来说可以工作，但有些东西告诉我它不是跨浏览器的。无论如何+1。 - adeneo
在chrome中完美运行，让我看看我能否为其他浏览器做得更好 :-) - Oscar Jara
2
這對我很有效。太好了！但是它在IE 7上不起作用。 - Eytch
initMouseEvent()已被弃用。https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent - Scott Sword
3
IE 9、不起作用；IE 10、不起作用；IE 11、不起作用；最新的FF也不行。我们有其他替代方案吗？ - Jean-Paul
显示剩余2条评论
18

我认为这是你可以得到的最佳跨浏览器方法。 在Safari，Firefox，Chrome和IE上测试通过。对于Chrome，Oscar Jara的答案是正确的方法。（更新：2016年10月13日）

$(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演示

今晚我用了这段代码，但遇到了一些困难：左边和上面的线都必须进行偏移以适应边距（如果有影响，则使用box-sizing:border-box）。更难的部分是，我将我的选择器CSS设置为height:20px，而常规选择器会正确地覆盖下拉列表。但是，使用此代码时它没有覆盖。将我的CSS切换为min-height:20px就足以解决我的问题。一个小时的抓狂值得分享 :-) - Stephen
它无法理解在 Firefox 中按回车键。 - Fanky
1
@Fanky 更新了代码和 jsFiddle。这样做是否符合您的意思？ - A. Wolff
4
这可能是你能得到的最接近的东西了：
$(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'});
       }
   });
});

FIDDLE

2
我最终在选项本身上设置了selected属性。然后即使在选择元素上也触发了更改。
谢谢，这非常有用！$("#x").val('09.5'); $("#x").trigger("change"); - jmp
0

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

为了满足我的需求，在“隐藏的魔术事件”中预填答案以模拟用户行为（以一种密集的测试方式），我使用以下jQuery代码。它通过索引选择选项：

// 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);

感谢https://stackoverflow.com/users/1324/paul-roub的纠正；-）

-3
4
请注意，链接式回答不被鼓励在SO（stackoverflow）上提问问题时，应该将SO的答案作为解决方案的终点（而不是参考文献的另一个中转站，这种参考文献往往会随着时间而过时）。请考虑添加一个独立的摘要到这里，保留链接作为参考。 - kleopatra
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接