var actionList = document.getElementById("actionList"); actionList.onmouseover = function () { selectElementMouseover(actionList); } actionList.onmouseleave = function () { selectElementMouseleave(actionList); } function selectElementMouseover(element) { fireEvent(element, "mousedown"); fireEvent(element, "mouseup"); } function selectElementMouseleave(element) { fireEvent(element, "mousedown"); } // To fire any event from JavaScript. function fireEvent(node, eventName) { var doc; if (node.ownerDocument) { doc = node.ownerDocument; } else if (node.nodeType == 9) { doc = node; } else { throw new Error("Invalid node passed to fireEvent: " + node.id); } if (node.dispatchEvent) { var eventClass = ""; // Different events have different event classes. switch (eventName) { case "click": // 'click' works correctly in Safari. For other we should use 'mousedown' or 'mouseup'. case "mousedown": case "mouseup": eventClass = "MouseEvents"; break; case "focus": case "change": case "blur": case "select": eventClass = "HTMLEvents"; break; default: throw "fireEvent: Couldn't find an event class for event '" + eventName + "'."; break; } var event = doc.createEvent(eventClass); var bubbles = eventName == "change" ? false : true; event.initEvent(eventName, bubbles, true); // All events created as bubbling and cancelable. event.synthetic = true; node.dispatchEvent(event, true); } else if (node.fireEvent) { var event = doc.createEventObject(); event.synthetic = true; node.fireEvent("on" + eventName, event); } };
<select id="actionList"> <option action="">ACTIONS</option> <option action="add">ADD NEW</option> <option action="edit">EDIT</option> </select>