jQuery open select by button

前端未结

关注

 7  1104

How to open select dropdown by button?

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

My code: http://js

相关标签:

7条回答

野趣味

2021-01-11 15:46

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)

情话喂你

2021-01-11 15:48
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)
发布评论:

提交评论
- 加载中...

花落未央

2021-01-11 16:00

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)

北海茫月

2021-01-11 16:01

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

太阳男子

2021-01-11 16:01
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)
发布评论:

提交评论
- 加载中...

予麋鹿

2021-01-11 16:01

I found a great solution here: https://stackoverflow.com/a/18284923/8472295

In your case you can wrap the button in a label and apply the same solution.

HTML

<label for="orderby">
    <button type="button">
        <span>Sort</span>
    </button>
</label>
<select id="orderby" name="orderby" class="orderby" aria-label="Sort By">
    <option value="date" selected="selected">Latest</option>
    <option value="popularity">Popularity</option>
    <option value="rating">Average rating</option>
    <option value="price">Price: low to high</option>
    <option value="price-desc">Price: high to low</option>
</select>

$("label").mouseover(function(){
    var $this = $(this);
    var $input = $('#' + $(this).attr('for')); 
    if ($input.is("select") && !$('.lfClon').length) {
        var $clon = $input.clone();
        var getRules = function($ele){ return {
            position: 'absolute',
            left: $ele.offset().left,
            top: $ele.offset().top,
            width: $ele.outerWidth(),
            height: $ele.outerHeight(),
            opacity: 0,
            margin: 0,
            padding: 0
        };};
        var rules = getRules($this);
        $clon.css(rules);
        $clon.on("mousedown.lf", function(){
            $clon.css({
                marginLeft: $input.offset().left - rules.left,
                marginTop: $input.offset().top - rules.top,
            });
            $clon.on('change blur', function(){
                $input.val($clon.val()).show();
                $clon.remove();
            });
            $clon.off('.lf');
        });
        $clon.on("mouseout.lf", function(){
            $(this).remove();
        });
        $clon.prop({id:'',className:'lfClon'});
        $clon.appendTo('body');
    }
});

Demo: http://jsfiddle.net/Yh3Jf/24/

The js creates a clone of the select element which updates the original.

Tested and works for me, in my case I used it to hide the select field with css, then the button triggers a drop down where a selection can be made.

0 讨论(0)

1 2 下一页