使用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事件。