jQuery open select by button

2019-02-21 18:12发布

站内问答 / jQuery
514 6 4

How to open select dropdown by button?

$('button').on('click', function() {
   $('select').trigger('click');
});

My code: http://jsfiddle.net/UGkWp/

UPDATE:
I found solutions for webkit browsers, but only these browsers: http://jsfiddle.net/UGkWp/2/ Maybe You known how do this in each browsers?

6条回答
smile是对你的礼貌
2楼-- · 2019-02-21 18:55

You can do it with only CSS like this:

<html>
<body>

<div class="sorting">
<div class="sort right"><label>
<span>Items per page</span>
    <select>
    <option value="">Items per page</option>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="40">40</option>
    <option value="60">60</option>
    <option value="100">100</option>
    <option value="200">200</option>
    </select>

    <span class="pointer"><i class="fa fa-caret-down"></i></span>
    </label>
    </div>
    </div>


</body>
</html>
<style>
select{
  -webkit-appearance:none;
    appearance:none;
      -moz-appearance:none;
}
.sorting{
    padding:5px 10px;
    border:1px solid #eee;
    clear:both;
  background:#FFF;
  height:40px;
}
.sorting h4{
    padding:4px 0 0;
    margin:0;
}
.sort{
    position:relative;  
    padding-left:10px;
  float:left;
}
.sort>label{
    font-weight:normal !important
}
.sort span.pointer{
    height:30px;
    width:30px;
    border-left:1px solid #ffffd;
    position:absolute;
    right:0;
    top:0;
    text-align:center;
    color:#c49633;
    font-size:20px;
    z-index:1;
}
.sort span.pointer i{
    margin-top:6px;
}
.sorting select{
    padding:5px 40px 5px 10px !important;
    margin-left:10px;
    border:1px solid #eee;
    background:none;
    height:30px;
    position:relative;
    z-index:2;
}
</style>

Visit this fiddle for more details: https://jsfiddle.net/ssjuma/1mkxw2nb/1/

查看更多
0人赞 添加讨论(0) 举报
太酷不给撩
3楼-- · 2019-02-21 18:56

This worked for me

$('select').focus();

查看更多
0人赞 添加讨论(0) 举报
祖国的老花朵
4楼-- · 2019-02-21 19:00 
(function($) {
    "use strict";
    $.fn.openSelect = function()
    {
        return this.each(function(idx,domEl) {
            if (document.createEvent) {
                var event = document.createEvent("MouseEvents");
                event.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                domEl.dispatchEvent(event);
            } else if (element.fireEvent) {
                domEl.fireEvent("onmousedown");
            }
        });
    }
}(jQuery));
$('#country').openSelect();

http://jsfiddle.net/yqs90jdw/

查看更多
0人赞 添加讨论(0) 举报
放我归山
5楼-- · 2019-02-21 19:02

I think you should have a look at this page:

Can I open a dropdownlist using jQuery

It seems like it is not possible to do this directly, but tools exists to emulate what you are trying to do.

An easy solution would be to use the "chosen"-plugin for jquery: http://harvesthq.github.io/chosen/

This also gives you some great advantages over normal selects, and its easy to use.

On this you can simply fire a "mousedown" event like the following:

$('#dropdown_id_chzn').trigger('mousedown')

Given you have chosen (and jquery) enabled on your page the following code should do the trick:

HTML:

<select name="foo">
  <option value="1">Bar</option>
</select>

JavaScript:

$('select[name="foo"]').chosen();
$('#foo_chzn').trigger('mousedown');

Notice that chosen automatically appends the "_chzn" to your dropdown-name, which is what you should use in your selector

查看更多
0人赞 添加讨论(0) 举报
Rolldiameter
6楼-- · 2019-02-21 19:04

I think this will help you..

Trigger documentation

$('button').on('click', function() {
    $('select').trigger('click');
});

$('select').click(function(){
alert($(this).val());
});

Fiddle Here

查看更多
0人赞 添加讨论(0) 举报
神经病院院长
7楼-- · 2019-02-21 19:05

hope this help

<select id="s">
    <option>aaaaa</option>
    <option>bbbbb</option>
    <option>ccccc</option>
</select>

<button>button</button>

$("button").click(function () {
    var size = $('#s option').size();
    if (size != $("#s").prop('size')) {
        $("#s").prop('size', size);
    } else {
        $("#s").prop('size', 1);
    }
})
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)