使用 jQuery 模拟单击选择元素答案

【问题标题】：Simulate click on select element with jQuery使用 jQuery 模拟单击选择元素
【发布时间】：2017-09-21 05:55:44
【问题描述】：

我使用此代码在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，但都不起作用。

感谢您的帮助。

【问题讨论】：

你想要发生什么？
如果您希望这样做，点击事件不会触发 SELECT 打开。
@Elen 我想打开选择下拉菜单
如上所述-它不会打开选择....您可以模拟Enter点击select
stackoverflow.com/questions/360431/…

标签： jquery

【解决方案1】：

好吧，你不能将 click 事件附加到 html select 但你可以做这个棘手的事情......

看看这里：

现场演示：

http://jsfiddle.net/oscarj24/GR9jU/

【讨论】：

以前没见过，对我有用，但有些东西告诉我它不是跨浏览器。无论如何 +1。
它在 chrome 中运行得很好，让我看看我是否可以在其他浏览器上做得更好:-)
我猜你需要某些浏览器的 createEventObject，但它仍然可能有问题，而且我认为没有一种方法可以在任何地方都可以使用，至少我有'没有看到 createEvent 方法使用了很多。
为我工作。这很棒！但是它不适用于 IE 7。
IE 9，不起作用，IE 10 不起作用，IE 11 不起作用，FF 最新，不起作用。我们有其他选择吗？

【解决方案2】：

这是我认为你能得到的最好的跨浏览器方法。在 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 demo

【讨论】：

今晚我使用了这段代码，但遇到了一些困难：左行和上行都必须偏移边距（如果重要，请使用 box-sizing:border-box）。更难的部分是我将我的选择 css 设置为 height:20px，常规选择正确地覆盖了下拉菜单。使用此代码，它没有覆盖。将我的 css 切换到 min-height:20px 足以解决我的问题。一个小时的拉头发值得分享:-)
在 FF 中输入不理解。
@Fanky 更新了代码和 jsFiddle。是你的意思吗？

【解决方案3】：

这是我认为的最接近的：

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

【讨论】：

【解决方案4】：

我最终在选项本身上设置了 selected 属性。然后甚至在选择元素上触发更改。

【讨论】：

感谢这非常有用！ $("#x").val('09.5'); $("#x").trigger("change");

【解决方案5】：

我有一个复杂的 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倒更正;-)

【讨论】：

【解决方案6】：

Oscar Jara 变体的小更新（toggle）
http://jsfiddle.net/mike_s/y5GhB/

【讨论】：

请注意 link-only answers 是不鼓励的，所以答案应该是寻找解决方案的终点（而不是另一个参考中途停留，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的概要，并保留链接作为参考。