使用jquery在复选框中单击打开选择下拉菜单 [英] Open a select drop down on click of checkbox using jquery

问题描述

我有一个下拉菜单说

 < select id =countries> 
< option value =1>国家< / option> 
< / select> 
  

和一个复选框，

 < input type =checkboxname =search_engineid =search_engineclass =hearvalue =search_engine/> 
< input type =checkboxname =search_engine1id =search_engine1class =hearvalue =search_engine1/> 
< input type =checkboxname =search_engine2id =search_engine2class =hearvalue =search_engine2/> 
  

点击复选框我想打开下拉菜单，我该如何使用jquery 。

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

 函数open_drop_down（）
 {
 $（'＃countries'）。show（）。focus（）。click（）; 
 
  

解决方案

编辑：从mithunsatheesh的回答中，

  var doClick = function（ ）{
'使用严格'; 
 var event = document.createEvent（'MouseEvents'）; 
 event.initMouseEvent（'mousedown'，true，true，window）; 
返回事件; 
}; （）。
 
 $（'。hear'）。click（function（）{
'use strict'; 
 $（'＃countries'）。focus（）。get（0 ）.dispatchEvent（doClick（））; 
}）; 
  

请参阅的jsfiddle 。请注意，它仅适用于Chrome（WebKit）。

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

I have a drop down say

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

and a check box,

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

On the click of the checkbox I want to open the drop down, how can I do that using jquery.

Tried the below code but its not working, I am using jquery 1.10.3

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

解决方案

EDIT: From mithunsatheesh's answer, I have integrated the doClick function here:

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

See jsFiddle. Please note that it only works in Chrome (WebKit).

Also, you may wish to bind to the change event.

这篇关于使用jquery在复选框中单击打开选择下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！