jquery - 使用jquery单击复选框打开选择下拉菜单

Question

我有一个下拉说

<select id="countries">
<option value="1">Country</option>
</select>

和一个复选框，

<input type="checkbox" name="search_engine" id="search_engine" class="hear" value="search_engine" />
<input type="checkbox" name="search_engine1" id="search_engine1" class="hear" value="search_engine1" />
<input type="checkbox" name="search_engine2" id="search_engine2" class="hear" value="search_engine2" />

单击我想打开下拉列表的复选框，如何使用 jquery 来做到这一点。

尝试了下面的代码，但它不起作用，我使用的是 jquery 1.10.3

function open_drop_down()
{
   $('#countries').show().focus().click();
}

Answer 1

编辑：根据 mithunsatheesh 的回答，我在doClick此处集成了该功能：

var doClick = function() {
    'use strict';
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    return event;
};

$('.hear').click(function() {
    'use strict';
    $('#countries').focus().get(0).dispatchEvent(doClick());
});

请参阅jsFiddle。请注意，它仅适用于 Chrome (WebKit)。

此外，您可能希望绑定到change事件。