在选择模拟点击事件（不适用于IE和FF） [英] Simulate click event on select (not working for IE and FF)

问题描述

我想在选择使用按钮上模拟点击事件。我通过以下链接获得灵感。
用jQuery模拟点击select元素

在上面的线程中，这个小提琴对铬合金工作正常。我面临的问题与Firefox和Internet Explorer的行为相同。

我编辑了小提琴。这是小提琴，但它似乎不起作用。在这个小提琴中，我可以进入功能，但实际的点击事件不会触发选择。我缺少一段代码，因为我的代码不工作。任何填写空白的帮助。

这里是HTML代码。

 < select id =dropdown> 
< option value =Red>红色< / option> 
< option value =Green>绿色< / option> 
< option value =Blue>蓝色< / option> 
< / select> 
< br> 
< button id =firetype =buttononclick =runThis（）>显示下拉项目< / button> 
  

这是Javascript。

  //< select>元素在mousedown上显示其选项，而不是单击。 
 showDropdown = function（element）{
 var event; 
 event = document.createEvent（'MouseEvents'）; 
 event.initMouseEvent（'mousedown'，true，true，window）; 
 element.dispatchEvent（event）; 
}; 
 
 //这不是魔术。 
 window.runThis = function（）{
 var dropdown = document.getElementById（'dropdown'）; 
 // showDropdown（dropdown）; 
 eventFire（下拉，'点击'）; 
}; 
函数eventFire（el，etype）{
 alert（'hi'）; 
 if（el.fireEvent）{
 el.fireEvent（'on'+ etype）; 
 el [etype]（）; 
} else {
 var evObj = document.createEvent（'Events'）; 
 evObj.initEvent（etype，true，false，window）; 
 el.dispatchEvent（evObj）; 
 
 
 $ / code $ / pre 
 
 
我还发现了几种相同的参考文献 
 
 
 HTML文件 
 
 
 <按钮>触发链接以下< /按钮>< br /> 
< a href =http://www.yahoo.com/target =_ blank> 
 http://www.google.com/</a> （新窗口）
< br> 
< select id =dropdown> 
< option value =Red>红色< / option> 
< option value =Green>绿色< / option> 
< option value =Blue>蓝色< / option> 
< / select> 
  
这是javascript文件。
  function eventFire（el，etype）{
 alert（'hi'）; 
 if（el.fireEvent）{
 el.fireEvent（'on'+ etype）; 
 el [etype]（）; 
} else {
 var evObj = document.createEvent（'Events'）; 
 evObj.initEvent（etype，true，false）; 
 el.dispatchEvent（evObj）; 
 
 
 
 document.getElementsByTagName（button）[0] .onclick = function（）{
 var element = document.getElementsByTagName（select ）[0]; 
 eventFire（element，click）; 
}; 
  
上面这个小提琴也不起作用。 
请让我知道是否需要更多信息。 
 
 
我从stackoverflow本身引用上面的小提琴。由于我的帐户限制，我无法粘贴直接链接。
解决方案
以下是我所做的：
 
 
  $（＃fire）。click（function（）{
 var e = document.createEvent（MouseEvents）; 
 e.initMouseEvent（mousedown）; 
 $（＃dropdown）[0] .dispatchEvent（e）; 
}）; 
  
 这是 JSFiddle 演示 
 
I want to simulate click event on select using button. I have inspired through the following link.
Simulate click on select element with jQuery

On above thread this fiddle is working fine for chrome. I am facing an issue with same behavior for firefox and Internet explorer.

I have edited the fiddle. This is fiddle but it seems it is not working. In this fiddle I am able to get into the function but actual click event is not firing on select. I am missing pieces of code and because of that my code is not working. Any help with fill in the blanks.

here is HTML code.
<select id="dropdown">
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button>
This is Javascript.
// <select> element displays its options on mousedown, not click.
showDropdown = function (element) {
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
element.dispatchEvent(event);
}; 

// This isn't magic.
window.runThis = function () { 
var dropdown = document.getElementById('dropdown');
//showDropdown(dropdown);
eventFire(dropdown, 'click');
};
function eventFire(el, etype) {
alert('hi');
if (el.fireEvent) {
    el.fireEvent('on' + etype);
    el[etype]();
} else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false, window);
    el.dispatchEvent(evObj);
}
}
Also I found couple of references for the same kind of operation.

HTML file
    <button>Trigger the link below</button><br />
    <a href="http://www.yahoo.com/"  target="_blank">
    http://www.google.com/</a> (new window)
    <br>
        <select id="dropdown">
    <option value="Red">Red</option>
   <option value="Green">Green</option>
   <option value="Blue">Blue</option>
   </select>
This is javascript file.
function eventFire(el, etype) {
alert('hi');
if (el.fireEvent) {
    el.fireEvent('on' + etype);
    el[etype]();
} else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
}
}

document.getElementsByTagName("button")[0].onclick = function() {
var element = document.getElementsByTagName("select")[0];
eventFire(element, "click");
};
This above fiddle is also not working.
Please let me know if any more information needed.

Above fiddle I am referencing from stackoverflow itself. Because of my account limitation I can not paste direct link.
解决方案
Here is what I did:
$("#fire").click(function () {
    var e = document.createEvent("MouseEvents");
    e.initMouseEvent("mousedown");
    $("#dropdown")[0].dispatchEvent(e);
});
Here is the JSFiddle demo

                        
这篇关于在选择模拟点击事件（不适用于IE和FF）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！