使用jQuery模拟点击选择元素

2021/01/29 14:11 · jquery ·  · 0评论

我使用以下代码clickselect元素进行仿真

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

我测试了clicktrigger但都没有用。

谢谢你的帮助。

好吧,您无法将click事件附加到html,select但是您可以执行此棘手的事情...

看一下这里:

现场演示:

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

我认为这是最好的跨浏览器方法。在Safari,Firefox,Chrome和IE上进行了测试。对于Chrome,Oscar Jara的答案就是解决之道。 (更新: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演示

我认为这已经接近您了:

$(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'});
       }
   });
});

小提琴

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

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

toggle奥斯卡·贾拉Oscar Jara)变体的少量更新(带有

http://jsfiddle.net/mike_s/y5GhB/

本文地址:http://jquery.askforanswer.com/shiyongjquerymonidianjixuanzeyuansu.html
文章标签:
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!