如何通过单击带有jquery的选择框以外的其他位置来使选择框下拉

时间:2016-09-14 01:07:02

标签: jquery html select

我想要实现的是我想点击一个div,这将使选择框下拉。所以像这样:

$('#test div').click(function(){
    $('#test select').dropDown();
});

是否有这样的行动呢?甚至是某种工作?

1 个答案:

答案 0 :(得分:2)



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

$('#test div').click(function(){
  $('#test select').openSelect();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <div>
    Click
  </div>
  <br /><br />
  <select>
    <option>123</option>
    <option>456</option>
    <option>789</option>
  </select>
</div>
&#13;
&#13;
&#13;

您可以注册以下jQuery函数:

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

简单地称之为:$('#test select').openSelect();

试试JsFiddle:https://jsfiddle.net/Zay_DEV/ptkxhky1/