7

I want to know how to trigger the onClick event of any select(html combobox element).

I tried to do $('#MySelect').click(); using jQuery and tried document.getElementById('MySelect').click(); using pure javascript.

But the two don't fire the dropdown event that have the options of the select.

Ps: i have sure that selector $('#MySelect') exists.

Paulo Roberto Rosa
  • 3,071
  • 5
  • 28
  • 53
  • 1
    `$( "#MySelect" ).trigger( "click" );` I think this is what you're looking for – em_ Nov 11 '13 at 18:24
  • Do you have a defined `onclick` event? Or an `onchange` event? – tymeJV Nov 11 '13 at 18:26
  • Using pure javascript this is how you would do it: http://stackoverflow.com/questions/7914684/trigger-right-click-using-pure-javascript – megawac Nov 11 '13 at 18:26
  • @ElliotM i tried this just now, with multiple selects, created another page with another new select too, did a lot of tests using this way and i't dont works. – Paulo Roberto Rosa Nov 11 '13 at 18:29
  • @tymeJV no. i did not. – Paulo Roberto Rosa Nov 11 '13 at 18:29
  • Do you just need the event you've bound to the click event to fire or do you actually want the select box to open as it would if clicked. If the latter you may need to create the dropdown menu using something like this: http://getbootstrap.com/2.3.2/javascript.html#dropdowns – olleicua Nov 11 '13 at 18:34
  • @olleicua Are you Serious??? Ohh no, do you really have sure that is impossible to trigger the html native onclick event of the select? – Paulo Roberto Rosa Nov 11 '13 at 18:37
  • I'm not entirely certain that it is impossible I just don't know how. I suggested using JS to make your own dropdown menu because it's the first thing I would likely try. – olleicua Nov 11 '13 at 20:23
  • This guy did it. It is not a trivial problem. http://code.google.com/p/expandselect/ – chiliNUT Nov 11 '13 at 18:40
  • I have stumbled upon this page as I wanted to style a dropdown arrow on a select, where a click would trigger the default behaviour. I can confirm, javascript did not work, but styling the `select:after` with absolute position, etc. it does work but ONLY if you set `pointer-events: none` in CSS. So if somebody is here for the same reason, give it a go. (This won't work in IE < 11 according to the CanIUse site.) – Barnabas Kecskes Jul 13 '17 at 13:42

2 Answers2

6

are you looking for this

  document.getElementById("MySelect").selectedIndex=3;
Vicky Gonsalves
  • 11,593
  • 2
  • 37
  • 58
1

Programatically triggering a click event will only run the defined click handler for that element. As you say in the comments, you have no such method defined, therefore no action will take place.

tymeJV
  • 103,943
  • 14
  • 161
  • 157
  • 1
    And if it is a native html handler? How i can trigger it? – Paulo Roberto Rosa Nov 11 '13 at 18:35
  • What is a native html handler? – tymeJV Nov 11 '13 at 18:35
  • The event that fires: "When you click a fresh html select element with the mouse", That does: "It open a dropdown that contains the options of the select, and a small blank space if it dont have options." – Paulo Roberto Rosa Nov 11 '13 at 18:45
  • Not possible. Sorry. You can only give focus. – tymeJV Nov 11 '13 at 18:47
  • 1
    Can you show me a documentation that says that it is impossible? Because it is just a click... no way to be a dangerous thing to let javascript do, or something like that to dont allow people to trigger it. – Paulo Roberto Rosa Nov 11 '13 at 18:49
  • Here's the answer which discusses it, http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due -- Many have tried, it doesn't work – tymeJV Nov 11 '13 at 18:49
  • see @chiliNUT's answer. it is possible. – Paulo Roberto Rosa Nov 11 '13 at 18:59
  • 1
    @PauloRoberto -- Not out of the box without hacking it, if you expand that plugin, as well as read the description: Browsers do not allow expanding control by creating another select with multiple options being displayed at once, this can be done by setting the "size" parameter. – tymeJV Nov 11 '13 at 19:02
  • well, it is a solution, ok to it dont does on "the better way" but it is acceptable because it resolved my problem that was showing the options. – Paulo Roberto Rosa Nov 11 '13 at 19:10
  • @PauloRoberto -- Awesome if it solves it, just thought I'd mention it's pretty hacky. – tymeJV Nov 11 '13 at 19:10
  • @PauloRoberto -- I'm also curious, what is the need for this? – tymeJV Nov 11 '13 at 19:11
  • It was needed to a custom grid that i created with html+javascript, that have a edit and when you `keyup` some word on it, it search if this text are contained on options and hide if `false` and show if `true` but i want to after the user typed something the user see the options that he got filtered with the word. – Paulo Roberto Rosa Nov 11 '13 at 19:38
  • another use of this is to dynamically create and activate a Select element in a mobile browser, which will cause an OS specific pop-up to appear. – Michael Sep 25 '17 at 01:14