使用jQuery模拟select元素

Question

我用这个代码模拟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"/>

我测试click和trigger,但都不起作用.

谢谢你的帮助.

Answer 1

好吧,你不能把click事件附加到HTML,select但你可以做这个棘手的事情......

看看这里:

现场演示:

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

Answer 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演示

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

小提琴