web-dev-qa-db-ja.com

jQuery開くボタンで選択

ボタンで選択ドロップダウンを開く方法は？

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

私のコード： http://jsfiddle.net/UGkWp/

UPDATE：
私はWebkitブラウザーの解決策を見つけましたが、これらのブラウザーのみです： http://jsfiddle.net/UGkWp/2/ たぶん各ブラウザーでこれを行う方法を知っていました？

jqueryselecttriggersclick
10
kicaj

次のようなCSSだけでそれを行うことができます：

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

詳細については、このフィドルにアクセスしてください： https://jsfiddle.net/ssjuma/1mkxw2nb/1/

7
Said Suleiman Juma
(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/

7
laurent belloeil

私はあなたがこのページを見ておくべきだと思います：

jQueryを使用してドロップダウンリストを開くことができます

これを直接実行することはできないようですが、実行しようとしていることをエミュレートするためのツールが存在します。

簡単な解決策は、jqueryに「chosen」プラグインを使用することです。 http://harvesthq.github.io/chosen/

これにより、通常の選択に比べていくつかの大きな利点が得られ、使いやすくなっています。

これで、次のような「マウスダウン」イベントを起動できます。

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

ページで有効（およびjquery）を選択した場合、次のコードでうまくいくはずです。

HTML：

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

JavaScript：

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

選択すると、自動的に「_chzn」がドロップダウン名に追加されます。これは、セレクターで使用する必要があるものです

1
user2849406

これは私のために働いた

$（ 'select'）。focus（）;

0
edo4hy

私はここで素晴らしい解決策を見つけました： https://stackoverflow.com/a/18284923/8472295

あなたのケースでは、ラベルでボタンを包み、同じ解決策を適用できます。

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>

JS

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

デモ： http://jsfiddle.net/Yh3Jf/24/

Jsは、元の要素を更新するselect要素のクローンを作成します。

テストして機能します。私の場合は、CSSで選択フィールドを非表示にするために使用しました。その後、ボタンを押すと、ドロップダウンがトリガーされ、選択を行うことができます。

0
Lyle Bennett