jQuery open select by button

2019-02-21 18:28发布

站内文章 / jQuery
15 0 0

问题:

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?

回答1:

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



回答2:

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 #ddd;
    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/



回答3:

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



回答4:

This worked for me

$('select').focus();



回答5:

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


回答6:

I think this will help you..

Trigger documentation

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

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

Fiddle Here



标签： jquery select triggers click
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~